CSSを効率よく記述する「Sass」の主な機能

CodeZine / 2014年4月7日 14時0分

 CompassはSassを拡張したツール集で、CSSのフレームワークといわれています。大手企業でも導入されていて、オイシックスでもデザイナーを中心に導入したいという声が上がっていました。本連載ではSassの導入から始めて、Compassの実践までご紹介します。第2回目はSassの実践部分を解説します。

■対象読者

CSSの基礎知識がある方 SassおよびCompassの導入を検討している方 ■Sassの主な機能(1)

 初めにSassの機能を紹介します。SassにはCSSを効率よく記載するために、以下の機能が用意されています。

●ネストして記載する

 Sassでは、CSSの記載を入れ子状(ネスト)にして記載することが可能です。HTMLと同様の構造のため、タグを意識した記述が行えますし、修正の際のメンテナンスもしやすくなります。

nest.scss
ul { margin: 0; padding: 0; list-style: none; //ulの{}の中にliのCSSを記述できる li { display: inline-block; a { //li同様aタグのCSSも追記する display: block; padding: 6px 12px; text-decoration: none; } } }
nest.css
ul { margin: 0; padding: 0; list-style: none; } ul   li { display: inline-block; } ul   li a { display: block; padding: 6px 12px; text-decoration: none; }
●変数を利用する

 Sassでは、「$」記号を利用して変数を扱うことが可能です。変数を使うことで、同じ処理の重複記載が不要となり、修正する際のリカバリも容易になります。

variables.scss
//「$○○ : 値」の形式で記載します  $baseColor: #FFFFFF; $mainColor: #ff8c00; $accentColor: #006400; body { //{}の中にも記載できます //ただし、{}の中に記載をするとその{}内でのみ変数が有効です $imagePath: '/shared/image'; background-color:$baseColor; .contents{ background-color:$mainColor; .button{ background-color:$accentColor; //「$imagePath/button.png」と記載すると文字列として認識せずにエラーとなります //#{}で囲むことで文字列として認識され、エラーを回避ます background-image:url(#{$imagePath}button.png); } } } //background-image:url(#{$imagePath}button.png);とここで記載するとbody{}の範囲外なのでエラーとなります
variables.css
body { background-color: white; } body .contents { background-color: darkorange; } body .contents .button { background-color: darkgreen; background-image: url(/shared/imagebutton.png); }


CodeZine

トピックスRSS

ランキング