Sass入門ガイド

Sassにできること

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Sassを使うと、どのようなことができるのでしょうか? ここでは、主な機能を取り上げながら、Sassのメリットを紹介します。
講師:
04:26

字幕

このレッスンでは Sass を使うとどの様なことが、できる様になるのか主な機能を取り上げながらそのメリットをご紹介します。Sass は Syntactically Awesome Style Sheetsの略で直訳すると構文的に素晴らしいスタイルシートつまり CSS を効率良く記述するための拡張言語です。別の呼び方としてCSS プリプロセッサやCSS メタ言語などと呼ばれたりもします。表記としては Sass の頭の S だけを大文字にし後ろの ass は小文字で書きます。発音は「サス」が一般的です。さて Sass を使うと一体どの様なことができるのでしょうか。先ずは代表的な機能を見てみましょう画面には一般的に書かれるCSS の例を表示しています。ここでは 3 つのルールセットが存在しています。ルールセットとはセレクタとそれに対して定義された宣言ブロックを合わせたスタイルの塊のことです。1 つ目のルールセットではcontent という id セレクタに対して背景色を設定しています。2 つ目のルールセットではcontent の子孫のh1 要素に対して文字色を設定しています。最後のルールセットではcontent の子孫のp 要素に対して行の高さを設定しています。 この様に一般的な CSS ではあるセレクタここでは content という id セレクタを親としてその子孫に対してスタイルを定義することが数多くあります。しかし同じセレクタ名を何度も書くのは手間ですしセレクタ名が変更になった時にすべてのルールセットをチェックして名前を変更することも面倒です。そこで Sass を使うと次の様に書くことができます。いかがでしょうか。ちょっと見慣れない書き方かもしれませんがなんとなく意味は理解できるのではないでしょうか。今表示しているのはSass のファイルの例です。この Sass では先ほどの CSS と全く同じ意味のルールセットが書かれています。content という id セレクタに対して定義された宣言ブロックの中に入れ子になってh1 要素やp 要素のルールセットが入っています。この様な書き方をルールのネストと読みますルールのネストは Sass の代表的な機能の 1 つです。この他にも Sass の機能にはCSS を書く上で魅力的で便利なものが沢山あります。続いて主な機能を紹介しましょう。記述の簡素化は先ほど紹介したルールのネストの他にもCSS をより簡単に書くための機能のことです。 また CSS だけではできない機能的なコメントも使うことができる様になります。プログラムライクな四則演算変数関数条件分岐などを使って複雑な処理も可能です。CSS ではスタイルを継承できますがルールセットをまとめて継承するといったことが Sass では可能になります。ミックスインと言う機能によって更に複雑なスタイル処理も可能です。パーシャルと言う機能を使うと複数ファイルで Sass を管理することもできます。出力する CSS のスタイルは自由にカスタマイズすることができます。デバックのためにソースマップファイルを出力したりSass を使ったフレームワークと連携したりすることもできます。この様に Sass を使うことでCSS を更に効率よく記述することができる様になるのです。このレッスンではSass を使うとどの様なことができるようになるのか主な機能を紹介しながらそのメリットを学びました。

Sass入門ガイド

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

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

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

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

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