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

SassとCompassをつかってCSSを効率作成しよう（2）

鈴木健二（オイシックス株式会社） [著] 2014/04/07 14:00

1 2 3 4

　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(http://cdn.shoeisha.jp/cz#{$imagePath}button.png); 
        } 
    } 
}
//background-image:url(http://cdn.shoeisha.jp/cz#{$imagePath}button.png);とここで記載するとbody{}の範囲外なのでエラーとなります

variables.css

body {
  background-color: white;
}
body .contents {
  background-color: darkorange;
}
body .contents .button {
  background-color: darkgreen;
  background-image:url(http://cdn.shoeisha.jp/cz/shared/imagebutton.png);
}

1 2 3 4