Sass入門ガイド

line-comments ファイルパスと行番号の出力

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
line-commentsオプションを使うと、出力されるCSSに、元となったSassファイルのパスと行番号をコメントで出力します。ここでは、その手順を紹介します。
講師:
03:54

字幕

line-comments オプションを使うと出力される CSS に元となった Sass ファイルのパスと行番号をコメントで出力します。このレッスンでは、その手順を紹介します。予めデスクトップにmy-sass というフォルダを作成しています。このフォルダの中にはSass ファイルと、それを元に出力されたCSS ファイルがあります。こちらのフォルダはキャッシュフォルダですので無視してください。それでは Sass ファイルと CSS ファイルをIDE にドラッグ & ドロップして中身を確認してみましょう。Sass ファイルはこの様に少し長い記述が書かれています。これをコンパイルした CSS ファイルも当然長い行数になっています。この CSS ファイルを見ている時に例えばここのスタイルを修正したいなと思うことがありますよね。こんな時に Sass ファイルに戻ると該当のスタイルが何処にあるのか目視で探さなければなりません。こんな時 line-comments オプションを使うと出力される CSS に元となった Sass ファイルのパスと行番号を出力することができるのです。それでは実際に試してみましょう。 出力したい Sass ファイルが含まれるフォルダの中でキーボードの Shift キーを押しながら右クリックして「コマンドウインドウをここで開く」を選びます。Mac 環境ではその開きたい場所のフォルダをターミナルのエイリアスにドラッグ & ドロップして開くとその場所でターミナルが開けます。ここではline-comments オプションを使ってSass ファイルをコンパイルしてみましょう。Sass コマンドの後に半角スペースを空けて記号のハイフンを 2 つ続けて入力します。その後 line-comments と入力しその後は通常通りコンパイルしたい Sass ファイルのファイル名を入力します。ここでは Sass ファイルのファイル名がscreen.scss ですのでそのファイル名を入力します。出力したいファイル名はそのまま screen で拡張子が css です。これでコマンドを実行してみましょう。Enter キーを押します。CSS ファイルがコンパイルされ出力されました。それでは IDE で出力された CSS ファイルを確認してみましょう。いかがでしょうか。先ほどと違って CSS ファイルの各ルールセットに元となった Sass ファイルのパスと行番号が追加されています。 例えばこの global-nav ID の下にあるgnav2 という ID のスタイルはscreen.scss の85 行目に定義されているとあります。それでは Sass ファイルに切り替えて実際に確認してみましょう。Sass ファイルの 85 行目85 行目にやはり該当のスタイルが定義されていました。この様にline-comments オプションを使うと出力される CSS に元となった Sass ファイルのパスと行番号をコメントで出力できます。このレッスンではline-comments オプションの使い方について学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。