Sass入門ガイド

インポート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
通常のCSSにも@importで外部ファイルをインポートする(読み込む)方法がありますが、Sassのインポートはさらに独自の機能が備わっています。ここでは、@importを使ったSass独自のインポートについて紹介します。
講師:
07:14

字幕

通常の CSS にも@import で外部ファイルをインポートする方法がありますがSass のインポートは更に独自の機能が備わっています。このレッスンでは @import を使ったSass 独自のインポートについて紹介します。画面では IDE でSass ファイルを縦に 3 つそのうち 1 つの CSS ファイルを右に表示しています。Sass ファイルは上からscreen.scsssub.scssother.scssという 3 つの Sass ファイルがあります。CSS ファイルは screen.scss をコンパイルした CSS でこれは IDE の機能を使ってscreen.scss の内容を編集すると自動的に保存、コンパイルが行われCSS に出力される様になっています。それではインポートについて紹介していきましょう。通常 CSS のインポートではこの様に指定をします。記号のアットマークの後にimport と書き読み込みたい CSS の URL を入力します。例えば、この様な形です。この様に記述するとSass では通常の CSS のインポートと判断されCSS にコンパイル、出力される時は通常の CSS と同じ様に@import 以下が書かれた状態で出力されます。 次に Sass 独自のインポートについて紹介します。一旦このインポートをコメントアウトしておきます。Sass 独自のインポートは同じ様に @import の後にURL 関数を使わずファイル名をパスで指定します。ここでは下で開いている sub.scssこの Sass ファイルを読み込んでみましょう。出力結果を見ると先ほどと違って@import 以下がそのまま出力されるのではなくsub.scss の中身が読み込まれて出力されていることが分かります。これが Sass 独自のインポートです。この方法を使うと複数の Sass ファイルから1 つの CSS ファイルだけを出力することができWeb ブラウザで読み込む CSS を減らすことができます。通常の CSS のインポートでは外部ファイル化した CSS を全て読み込まなければいけないため管理が煩雑になりまたファイルの読み込みの時間も長くかかります。Sass ファイルの記述が長くなってきたらこのインポートを使って複数ファイルに分割して使うと良いでしょう。では通常の CSS でのインポートとSass 独自のインポートこれは、どの様に判断されるのでしょうか。 それには幾つかの条件があります。先ず 1 つ目は指定したファイルの拡張子です。Sass 独自のインポート機能を使うにはSassファイルしか読み込めません。CSS は読み込めませんのでこの形と同じ様に拡張子を CSS にしたとしてもはやり Sass 独自のインポートは使えません。次に指定する URL です。現在は相対パスで指定していますがこれが http から始まる絶対パスで指定すると通常の CSS のインポートと判断されてしまいます。3 つ目の条件は URL 関数の有無です。Sass 独自のインポートではURL 関数を使って外部ファイルを指定することができません。そのため例えば@import の後に URl 関数を使ってSass ファイルを読み込むと出力される CSS ファイルではやはり通常の CSS のインポートとして扱われています。そのため Sass 独自のインポートとして外部の Sass ファイルを読み込みたい時はこの様にダブルクオテーションでファイルへのパスを指定すると良いでしょう。また、この他にも通常の CSS のインポートでは使えるメディアタイプとの組み合わせは使えないといった条件があります。 これらの条件を踏まえてこの様な形で Sass ファイルを読み込むとSass 独自のインポートとして機能します。Sass 独自のインポートでは拡張子を付けないで使うこともできます。この様に拡張子を付けずにファイル名の部分だけを指定するとこのファイル名を持つ拡張子がsassまたは scss のファイルを自動的に探しそのファイルを読み込みます。また通常の CSS のインポートではあらゆるルールセットの一番上でインポートをする必要がありますがSass 独自のインポートではインポートを宣言する場所は先頭でなくても構いません。例えばルールセットの下で宣言するとSass ファイル自身に宣言したスタイルの下に外部ファイルからのスタイルを読み込むことも可能です。また読み込む Sass ファイルは複数同時に指定することもできます。通常の CSS のインポートと同様に複数行で名前を変えて指定することも勿論可能ですが1 行にまとめてカンマ区切りで指定するとはやり同じ様に複数の Sass ファイルを順番に読み込むことができます。また、ちょっと変わった読み込み方としてSass のルールのネストの中で読み込むことも可能です。 この様にネストの中でSass ファイルを読み込むと出力される CSS ファイルでもネストされた状態でこの外部読み込みされた Sass ファイルの中身が出力される様になっています。この様に Sass 独自のインポートの機能を使って複数の Sass ファイルを1 つの CSS ファイルにまとめてコンパイル出力することが可能になります。このレッスンでは独自の機能が備わっているSass のインポート機能について学びました。

Sass入門ガイド

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

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

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

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

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