Sassの概要を把握しよう(6-36)

Sassってなに？

SassはCSSをより便利に効率的に書けるようにした言語

Syntacically Awesome Stylesheets :構文的にイケイケなスタイルシート

背景

CSSだと複雑な事ができない

↓

コードの再利用、変数、条件分岐、演算などをできるようにしたのがSass

メリット

・簡略に記載できる

・変数で同じ値を使いまわせる

・四則演算ができる

・コードの再利用ができるetc...

BootstrapをカスタマイズするのにSassを使うと簡単にできるので

今回Sassを導入する

Sassの基本の使い方

拡張子[scss]ファイルを作成→CSSにコンパイル→HTMLでCSSを読み込む

拡張子には[sass]と[scss]があり、scssの方がCSSとの互換性が高く、普及してる

app.scss

↓コンパイル

app.css

↓読み込む

new.html

app.scssをnew.htmlに読み込むことはできない

Sassの基本の書き方①ネスト

CSSセレクタを入れ子にして書ける

app.css

nav ul{

    margin:0;

    padding:0;

}

nav li{

display:inline-block;

}

app.scss

nav{

    ul{

        margin:0;

        padding:0;

}

li{display:inline-block;}

}

HTMLの入れ子構造と同じように書けるので構造が把握しやすくなる

Sassの基本の書き方②変数

値に変数を入れておいて、変数名を参照することで値を使いまわせる

修正が一か所で済むし、似たような違う色が増えることも防げる

Sassの基本の書き方③セレクタの参照

「&」を書くことで親セレクタを参照できる

「&」を使うことで親を一から指定しなおさずに済み、スッキリ書ける

Sassの基本的な書き方④import

ファイルを分割して読み込むことができる

CSSの@importとSassの@importは基本的には同じ構文で使える