Sass メモ
========================================================
〜Sassとは〜
サス・Syntactically Awesome Stylesheets(←直訳:構文的にめっちゃすごいスタイルシート)
ざっとまとめると、「CSSのコーディングをより便利にするモノ」。
※コーダーによってコーディングするときそれぞれ癖がでてしまう。
※複雑な継承(たくさんのclass名など)。
※似たようなスタイルがあってコピペめんどくさい。
そんな面倒なことを簡単にしてくれるのがSassさん。 ” 構文的にめっちゃすごいスタイルシート ”なのです。めっちゃすごいんです、オーサム。awesome。
========================================================
〜コンパイラー〜
SassさんはそのままだとWebブラウザで認識されません。
Sassファイル(.sass / .scss)をコンパイラーに通す事で.cssファイルを生成することができます。
========================================================
〜記述〜
Sassでの記述は、だいたいCSSと似ています。でも、ちょいと変数とか、ネスト構造になってたりする。
※拡張子が.sass / .scssと二つあるのは、簡単に言えば、
・.sassは最初にSASS記法で決められていてコーディングが簡単になる。
・.scssはSCSS記法(Sassy CSS)記法で新しい方であり、CSSに近いためコーディングはかどるかも。←現在こっちが主流!!!
例)
【.sass】
body
color: #000;
【.scss】
body {
color:#000;
}
これをコンパイルすると
↓
【.css】
body {
.color: #000;
}
========================================================
〜SASS記法とSCSS記法の違い〜