CSSとSassの違い

備忘録

●CSS…Cascading Style Sheet。Cascadeは滝。滝のように上から順に読み込んでスタイルプロパティを適用していくってことかな。

　Require_Treeで同一ディレクトリ内を参照している。アセットパイプラインを使ってCSSファイルを一つにまとめて、HTMLに適用している。

 

●Sass…CSSの進化版。セレクタのクラス名を階層的に入れ子構造で指定できる。また、プロパティを変数化できるので、プログラミング的にCSSプロパティを当てられる。

　メソッドとして@importを用意していて、これをapplication.scss で読み込んでHTMLに適用している。（パーシャル化）

※　@importは上から順番に見込んでいくので、Reset.cssとか、カラー指定をするscss、clearfixなど変数化を定義しているファイルは上部に記述していないと、適用されずに読み込まれてundefined_method とエラーになって困ることがある。注意。

 

＜入れ子構造＞

 .parent.child { color: white; }
 .parent.child.grandchild { color: blue; }

                 ⬇︎
 .parent {
    .child { color: white;
       .grandchild { color: blue;
       }
    }
 }

 　このように書けるので、プロパティの継承が簡単になる。記述量が減る。流れでCSSを見やすくなる。

 

＜変数化＞

 $section-color: rgb(255,255,255);
 @mix-in clearfix() { 
             clear:both;
             content:"";
             display: block;  }

 　このように変数化すれば、section-colorを新たなプロパティとして利用できる。clearfixをHTMLで利用できる。

 

こんな感じかな。まとめました。Sassのapplication.scss内の記述順は大事だから覚えておこう。

備忘備忘。