SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Sassの主な機能(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
SassとCompassをつかってCSSを効率作成しよう連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7695 2014/04/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング