学習[51]日目
本日の学習内容
Sassって何？
Sassって何？
CSSの機能を拡張した言語で、CSSに非常に似ていますが異なる言語です。
Sassには以下のようなメリットがあります。
●記述の簡略化が可能
CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sassは親子関係にあるセレクタをネストして書くことができます。
ネストして記述することで深い階層になっても親子関係がわかりやすく、親要素を複数記述しなくて済むといったメリットがあります。
●処理が簡略化可能
Sassでは変数や条件分岐といったプログラムのような処理を記述でき、CSSよりも柔軟なコーディングが可能となります。
例えば下記のように色の指定をする際など何度も使用する値は変数を定義することで、変数名で何度も利用することが可能です。
＃$変数名: 値;で定義可能
$menu-color: rgb(10, 10, 10); list { background-color: $list-color; }
上記のような変数定義による記述の他にもmixinという機能を使用することで、同じスタイルをまとめることもできます。
変数が値を定義するものに対して、mixinはスタイルを定義するもので、同じスタイルを記述する必要がなくなります。
mixinを定義するには、@mixin mixin名() {}のように記述します。
実際の使用例に関しては現時点でイメージがつかないので後で理解した上で追記したいと思います。
●複数のCSSファイルを1つにまとめ管理可能
Sassではパーシャルという機能を使用することで、複数のSassファイルを1つのCSSファイルとしてまとめることができます。
パーシャルとは、分割したSassファイルのことで、ファイルを分割することで、機能や内容ごとに管理が可能になります。
パーシャルを利用することで通常のcssのように一つのファイル に全てのスタイルを記述すると文量が膨大になり、可読性が悪くなることを防ぐことができます。
＃パーシャルファイルを作成
ファイル名を_（アンダースコア）から開始
@import ファイル名と記述することで読み込みが可能
@import "reset";
個人的にrailsにあったrenderメソッドに似てるように感じました。
Sassを利用するにあたり通常のCSSファイルには記述することができませんが、SassファイルにCSSを記述することは可能となっています。
Sassを扱うファイルの拡張子は.以下の2種類があります。
.sass
最初に作られたSassの記法（SASS記法）を扱うことが出来ます。
SASS記法では波カッコの省略やセミコロンが不要などのモダンで非常にシンプルな記法という特徴がありますが、現在主に利用されているのは後述する.scssの方になります。
.scss
CSSに非常に似た記法（SCSS記法）でSassの機能を使うことが出来ます。
Sassを実際に使用する場合に関して以下のようなフォルダ構成が一般的なようです。
●index.html
●style.css
●stylesheetsフォルダ(すべてのscssファイルを管理するフォルダ)
●style.scss
●_reset.scss
●configフォルダ(プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダ)
●mixinフォルダ(scss内で使用するmixinファイルを管理するフォルダ)
●modulesフォルダ(モジュールを管理するためのフォルダ)
●vendorフォルダ(ライブラリのファイルを管理するフォルダ)
●overrideフォルダ(vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダ)
以上で本日の学習を終了致します。
最後までお読み頂きありがとうございました。
