crossline

Sass メモ

font-size:12px;line-height: 150%;

========================================================

 

 

〜Sassとは〜

http://sass-lang.com/

サス・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記法の違い〜

 

f:id:ishuko:20150526095641p:plain