Sass入門ガイド

コメント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Sassでは、通常のコメントに加えて1行メントも使うことができます。また、それぞれのコメントでは出力結果が異なるのも特徴的です。ここでは、コメントの書き方とその出力について紹介します。
講師:
05:06

字幕

Sass では通常のコメントに加えて1 行コメントも使うことができます。また、それぞれのコメントでは出力結果が異なるのも特徴的ですこのレッスンではコメントの書き方とその出力について紹介します。画面では IDE でSass ファイルと CSSを並べて開いているところです。左側の Sass ファイルの内容はIDE の機能を使って自動的に保存、コンパイルされリアルタイムに画面右側のCSS ファイルに出力される様になっています。予め CSS の通常の書式でコメントを入力してあります。この様なコメントは複数行に渡ってコメントを入力することもできるCSS の通常の記法のコメントです。Sass では、このコメントの書き方に加えて1 行だけのコメントを書くことができます。1 行コメントを入力するには記号のスラッシュを2 回連続で入力しその後に文字列を入力します。こうすることで 1 行コメントを利用することができます。但しご覧の様に1 行コメントは Sass ファイルに入力できてもCSS にコンパイルした時には跡形も無く消え去ってしまいます。これは Sass の1 行コメントの使用になるので注意しておきましょう。 尚、通常の書き方のコメントはそのまま CSS ファイルにも出力されます。Sass において CSS の出力スタイルは 4 つ選べますがそのうちの最も CSS のコードを圧縮するcompressed という出力スタイルを選択している場合はこの CSS の通常のコメントも削除されて出力されます。実際に試してみましょう。ここでは IDE の機能を使ってSass ファイルを CSS ファイルにコンパイルしていますのでIDE の設定画面からSass コマンドのオプションを指定します。ここでは IntelliJ IDEAというIDE を使っていますのでこの Sass ファイルを CSSにコンパイルする機能File Watchers の設定を変更します。「File」 メニューから「Settings」を選びその中の「File Watcher』からSass の設定をダブルクリックして開きます。設定項目の「Arguments 」という項目では実際の Sass コマンドやSCSS コマンドで使えるコマンドオプションを指定できます。ここでは CSS の出力スタイルのコマンドオプションにExpand というオプションが指定されていますので一時的にcompressed というフォーマットに変更してみましょう。 compressed に変更ができました。OK ボタンをクリックして設定を変更します。それではもう一度Sass ファイルを変更してコンパイルをかけてみましょう改行を入れて変更を入れるとコンパイル結果の CSS からは通常の記法のコメントも削除されました。この様に Sass ではCSS の出力スタイルによって通常の CSS の書き方であるコメントがそのまま残ったり消えたりすることに注意をしてください。尚、出力フォーマットがcompressed フォーマットの場合でも出力結果に残るためのコメントの記法というものもあります。実際に書いてみましょう。通常のコメントの記法と同様に記号のスラッシュとアスタリスクでコメントの内容を囲みます。ここまでは通常のコメントと同様です。そして、この頭のスラッシュとアスタリスクの後にエクスクラメーションマークを入力します。この 3 つの記号で始まる特殊なコメントは出力スタイルが compressed フォーマットの場合でも出力結果の CSS にコメントが残ります。この特殊な書き方のコメントは例えば CSS ライブラリのライセンスを記入する等Sass ファイルからもCSS ファイルからも消したく無いコメントがある場合に使いましょう。 このレッスンではSass で使うことができる1 行コメントや特殊なコメント更に出力スタイルによって挙動が変わるコメントの概要について学びました。

Sass入門ガイド

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

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

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

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

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