Sass入門ガイド

SassScriptのデバッグ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
@debugディレクティブを使うと、コンパイル時にコマンドライン上にSassScriptの実行結果を出力できます。これは、結果の確認などのデバッグ時に便利な機能です。ここでは、@debugディレクティブを使ったSassScriptの結果の出力を紹介します。
講師:
04:34

字幕

@debug ディレクティブを使うとコンパイル時にコマンドライン上にSass スクリプトの実行結果を出力できます。これは結果の確認等のデバック時に便利な機能です。このレッスンでは @debug ディレクディブを使ったSass スクリプトの結果の出力を紹介します。Sassでは四則演算を始め様々な演算が使えます。そのため、何処で、どの様な結果が出力されているのかどうかはコンパイルをしてみないと分かりません。また Sass 短いファイルであれば単にコンパイルをすれば問題ありませんが長い Sass ファイルでは自分が書いた式が何処にあるのかコンパイルをするたびに確認しなければいけません。そんな時に便利なのが@debug ディレクディブです。@debug ディレクディブを使うとどのファイルのどの場所でどんな結果が出力されているのかそれを確認することができます。実際に確認してみましょう。画面では右側にscreen.scss というSass ファイルを開いています。ここに @debug ディレクディブを記述してみます。記号のアットマークに続きdebug と入力し半角スペースの後に出力したい式を入力します。 ここでは適当な四則演算を入力しましょう。この結果がどうなるのかSass をコンパイルしてみましょう。この Sass ファイルはデスクトップにあるmy-sass フォルダの中に置いてあります。そのため Windows ではこの Sass をコンパイルするにはこのフォルダの場所でコマンドプロンプトを開きます。キーボードの Shift キーを押しながら右クリックをして「コマンドウインドウをここで開く」を選択します。コマンドプロンプトが開きこの Sassフ ァイルのある場所が設定されました。Mac ではコンパイルしたい Sassフ ァイルが入っているフォルダをターミナルにドラッグ & ドロップすることでそのフォルダの場所が開きます。それでは Sass ファイルをコンパイルしてみましょう。Sass コマンドを使ってscreen.scssを適当なファイル名でコンパイルします。出力結果を確認するとscreen.scssの1 DEBUG: 325 px と書いてあります。これは、このファイル名の中で1 行目に@debug ディレクディブを使ってデバック文が出力されました。その内容は325 ピクセルという意味です。 つまり Sass ファイルの中で@debug ディレクディブを使って書いた式の内容がコンパイル時に、この様に出力されるのです。例えば同じ様なデバッグ文を別の行に書いてみましょう。ここでは 5 行目に別のデバッグ文を出力します。それでは、もう 1 度同じ Sass ファイルをコンパイルしてみます。今度は先ほどのデバッグ文に加えて5 行目で 48% というデバッグ文が出力されました。実際にSass に書いた内容が計算されて出力されていることが分かります。ここで試したのは短い Sass ファイルでしたから実際にデバッグ文を使わずともコンパイルをかければ出力される値は確認できるかもしれません。しかし Sass ファイルが長くなってくると何処でどの様な値が出力されているのかコンパイルするたびにスクロールしたりして探さなければいけません。そんな時この @debug ディレクディブを使うと効率的にデバッグを進めることができます。このレッスンでは@debug ディレクディブを使ったSass スクリプトの結果の出力を学びました。

Sass入門ガイド

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

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

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

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

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