Sass 入門

パーシャル

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
別のSassファイルにインポートするなどして、CSSにコンパイルする必要が無くなったSassファイルがある場合、パーシャルという機能を使えばコンパイルを回避することができます。ここでは、パーシャルの概要とその使い方について紹介します。
講師:
05:55

字幕

別の Sass ファイル等にインポートするなどしてCSS にコンパイルする必要がなくなったSass ファイルがある場合パーシャルという機能を使えばコンパイルを回避することができます。このレッスンではパーシャルの概要とその使い方について紹介します。画面ではデスクトップにあるmy-sass フォルダの中に3 つ Sass ファイルがありこの 3 つの SassファイルをIDE で開いているところです。Sass ファイルの中を見るとscreen.scss という Sass ファイルにsub、other、それぞれの Sass ファイルがインポートで読み込まれています。この様に Sass 独自のインポート機能を使ってCSS を出力する場合最終的に Web ブラウザに読み込む CSS はscreen.scss ファイルから出力されたCSS ファイル1 つのみで大丈夫です。そのため sub.scss やother.scss からはCSS を出力したくありません。通常 Sass のウォッチオプション等を使用してフォルダ単位で監視、コンパイルした場合そのフォルダに含まれる全ての Sass ファイルに対応するCSS ファイルがコンパイルされ出力されてしまいます。 それを抑制、回避するのがパーシャルという機能です。ではパーシャルを使う前に通常通りフォルダごと監視コンパイルを行って全ての Sass ファイルに対応するCSS が出力されることを確認してみましょう。一旦 IDE で開いている Sassファイルを閉じます。IDE は最小化しておきます。このフォルダに含まれる Sass 全てのファイルをコンパイルしたいためこのフォルダの位置を基準にコマンドプロンプトを開きます。キーボードの Shift キーを押しながら右クリックし「コマンドウインドウをここで開く」を選択します。Mac の場合指定の場所でターミナルを開きたい場合はその開きたい場所にフォルダをターミナルのアイコンにドラッグ & ドロップすれば指定の場所でターミナルを開くことができます。それでは Sass コマンドのウォッチオプションを使ってこの my-sass フォルダに含まれるSass ファイル全てをコンパイルしてみましょう。Sass コマンドを使ってウォッチオプションを使います。このフォルダに含まれる全てのファイルをコンパイルしましょう。実行します。フォルダ内の全てのファイルに対してコンパイルが実行されそれぞれ CSS ファイルができました。 しかし実際にはscreen.scss にsub.scssother.scss を読み込んでいますのでother.css やsub.css は Web ブラウザで使いません。パーシャルを使ってこの CSS ファイルの生成を抑制、回避してみましょう。一旦ウォッチしている Sass コマンドを止めます。そして一度生成された CSS ファイルを削除します。右クリックから削除します。パーシャルを使うにはパーシャルにしたいファイルに対してファイル名の頭にアンダーバーを付けます。この様なファイル名になったファイルを一般にパーシャルファイルと呼びます。同じ様に sub.scss にもファイル名の頭にアンダーバーを入力します。これによりパーシャルファイルについてはCSS ファイルが出力されなくなります。もう一度ウォッチオプションを使ってこのフォルダ全ての Sass ファイルをコンパイルしてみましょう。Sass コマンドのウォッチオプションを使って全てのファイルに対してコンパイルを実行します。先ほどと違ってCSS ファイルが出力されたのはscreen.scss からのみです。sub と other にはファイル名の頭にアンダーバーを付けてパーシャルファイルとして指定しましたのでこれらについては CSS が出力されなくなりました。 尚、パーシャルファイルの頭にはアンダーバーを追加しましたがSass 独自のインポートではこの冒頭のアンダーバーは省略して記述することができます。screen.scss ファイルをもう一度コードエディタで開いてみましょう。コードエディタにドラッグ & ドロップしてファイルを開きます。ここに記述されているインポートでは本来のファイル名ではアンダーバーが付いているにも関わらずアンダーバーを省略して記述しています。しかし、これでも正常に CSS は出力されます。このままでも大きな問題にはなりませんが通常のインポートとパーシャルのインポートに区別が付きづらくなるため念のためアンダーバーを付けておくことをお勧めします。この様に記述することで通常のインポートとパーシャルのインポートが一目で分かるようになりSassファイルの中身がすっきり整理できるかと思います。このレッスンではパーシャルの概要とその使い方について学びました。

Sass 入門

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

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2014年10月16日

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

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

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