CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 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);
}

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 鈴木 健二(オイシックス株式会社)(スズキ ケンジ)

    オイシックスにてスマホ開発担当。映像製作、DTPなどのデザイナー経験があり、フロントエンドからサーバサイドまで幅広く開発を行っている。現在仙台在住で、毎週東京のオイシックス本社まで通っている。得意分野はJavaScript、CSS。

バックナンバー

連載:SassとCompassをつかってCSSを効率作成しよう
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5