スタイルシートを楽に記述する

スタイル―トを楽に記述するASS

SASSとは、再利用できるスタイル定義や変数など、スタイルシートを効率的にコーディングできるように拡張されたメタ言語で、CSSという言語を独自の記法を使って記述するための言語です。

なぜ、SASSなのか？というとスタイルシートを書くことはとても骨の折れる作業だからです。弊社ではよくワードプレスのカスタマイズを行っています。


その中でもグローバルメニューは毎回カスタマイズしなければならない定番の作業です。

「毎回やる作業ならコピペで済むのでは？」

と思うでしょう。ところがシステムが勝手にIDを振ってしまうので毎回異なるIDにたいしてスタイルを定義する必要があるのです。そしてメニューの数が増えれば増えるほどCSSファイルが縦に長くなってしまい可読性が悪くなってしまう。たまに読み返すと億劫になる。

たとえばグローバルメニューのスタイルを定義しようものなら

#menu-item-339,
#menu-item-333,
#menu-item-329,
#menu-item-327,
#menu-item-326,
#menu-item-990,
#menu-item-989,
#menu-item-320

こんな適当な数字の付いたIDを設定するのだ。メニューに画像を使う場合は全てのメニューに共通のスタイルを定義した上で個別の定義で上書きする必要がある。しかし、そうするとcssファイルが長くなりすぎて複雑になる。例えばこんな感じ。

.entry-content {
  margin: 10px;
}

.entry-content ul {
  padding:0;
  margin: 10px;
  list-style: none;
}

.entry-content ul li {
  float: left;
  margin-right: 10px;
  vertical-align: middle;
}

.entry-content ul li a{
  color: #FFFFFF;
  text-decoration: none;
}

これは良くない。可読性を保つための工夫が必要だ。そこでscssを使って書き直してみる。 

.entry-content {
  margin: 10px;
  
  ul {
    padding: 0;
    margin: 10px;
    list-style: none;

    li {
      float: left;
      margin-right: 10px;
      vertical-align: middle;

      a {
        color: #FFFFFF;
        text-decoration: none;
      }
    }
  }
}

このように記述できる。カッコ{}で囲むからとても読みやすい。
コンパイルすると次の様に書き出してくれる。 

.entry-content {
    margin: 10px;
}
.entry-content ul {
    padding: 0;
    margin: 10px;
    list-style: none;
}
.entry-content ul li {
    float: left;
    margin-right: 10px;
    vertical-align: middle;
}
.entry-content ul li a {
    color: #FFFFFF;
    text-decoration: none;
}

よく使う機能

他にもsassを使う上で知っておくと便利な機能を紹介する。良く使う機能として次の4つがある。

  • インポート機能
  • 変数
  • ミクスイン
  • 継承

順番に説明していく。

インポート機能

インポート機能は別のscssファイルを読み込んで、読み込み元のscssファイルの内容とマージする機能だ。scssファイルを用途ごとのファイルを分けて定義しておけば管理も簡単になる。このインポートするscssファイルのことをpartical(パーシャル)と言う。particalとは断片という意味。この機能はレスポンシブなcssを記述する際にとても重宝している。

partical用のファイル名は_(アンダースコア）で始める。たとえば、スマートフォン用のスタイルをparticalとして定義して、メインのcssにインポートする場合は、例えばこんな感じで_iphone.scssを作成する。

// スマートフォン向け
@media only screen and (max-width: 480px) {
 * {
   word-break: break-all;
   -webkit-touch-callout:none;
   -webkit-tap-highlight-color:rgba(255,255,0,0.4);
   -webkit-text-size-adjust:none;
   line-height: 1.6;
 }
}

そして、style.scssで次のように@importを使って_iphone.scssを読み込むとその内容をstyle.cssに書き込んでくれる。 

// スマホ用スタイル
@import "iphone";

@importの引数のファイル名に_(アンダースコア）は含めない点に注意。

変数

枠線の色や文字色など後で変更になった場合に同じ色の箇所をCSSの中か探すのは骨が折れる。できればやりたくない。こんな悩みを解決する機能が変数だ。変数は$で始まる英数記号で定義できる。

まずはサンプル。 

$base_color: #0066cc; // メインカラーを定義
$border_color: #398f14; // 枠線を定義

body {
  color: $base_color;
}

div.box {
  border: $border_color 2px solid;
}

$base_colorと$border_colorを定義して、bodyとdiv.boxの中で使用している。万が一、メインカラーが変わってしまった場合でも$base_colorの定義だけを変更すれば全体に反映されるのだ。

cssへのコンパイル後はちゃんとカラーコードに変換されている。

body {
  color: #0066cc;
}

div.box {
  border: #398f14 2px solid;
}

ミクスイン

ミクスイン(mixin)とは、コード片に名前をつけて定義し別の場所でその名前を呼び出すとそのコピーが出力される、というもの。つまり、同じコードをコピペする手間を省力化するものです。
またミクスインそれ自体はcssに出力されない上に、変数で値を操作できます。

例をあげると、

// ボタンの共通スタイルを定義
@mixin button-template($height: 30px, $width: 40px) {
  height: $height;
  width: $width;
}

// 通常のボタン
.button {
  @include button-template();
}

// 送信ボタン
.submit-button {
  @include button-template(50px, 100px);
}

コンパイルすると、下記のように出力されます。

.button {
  height: 30px;
  width: 40px;
}

.submit-button {
  height: 50px;
  width: 100px;
}

継承

継承はある程度決まったスタイルをベースとなるモジュールクラスとして作成して、そのクラスを流用し継承先のクラスの一部をカスタムしたいときに使います。

継承はミクスインとは違い、それ自体がクラスとして出力されます。 だから、継承を使わない時でもcssに記述が残ってしまいます。しかし、継承したときに中の記述が全部展開されるわけではないので、 記述が決まっているものに関しては継承は有効です。

例をあげる。ボタンのスタイルを定義するケースを考える。ボタンには普通のボタンと送信ボタンの2つのボタンがある。送信ボタンは普通のボタンから派生しているのでスタイルもある程度共通している。だから普通は次のような形式のcssを書くはずだ。

// 普通のボタンと送信ボタンの共通のスタイル
.button,
.button-send {
  display: inline-block;
  border: 1px solid gray;
  background-color: silver;
}

// hover時のスタイル
.button:hover,
.button-send:hover {
  border-color: black;
}

// 送信ボタンのみのスタイル
.button-send {
  background-color: blue; // プロパティを上書き
  border-radius: 5px; // 新たなプロパティの追加
}

この場合は二つのボタンしかないからまだめんどくないかもしれないが、さらにキャンセル用のボタンや処理停止ボタンなどのスタイルを定義するとしたら面倒なことになる。

そこでsassの継承機能を使えば、ずっとシンプルに書ける。継承は@extendを使う。

// 普通のボタン
.button {
  display: inline-block;
  border: 1px solid gray;
  background-color: silver;
  &:hover {
    border-color: black;
  }
}

// .button セレクタを継承・拡張
.button-send {
  @extend .button; // .button を継承
  background-color: blue; // プロパティを上書き
  border-radius: 5px; // 新たなプロパティの追加
}

SASSを使い始めてから{}の便利さに手放せなってしまった。

H3見出しa

おまけ

インストール方法

遅くなったけど、SASSの使用方法を説明したい。
SASSはrubyでできている。だからまずはRubyをインストールしなければならない。

RubyInstaller for Windowsにアクセスして、Ruby 1.9.xをダウンロードする。
ダウンロードしたexeを実行するとインストーラーが立ち上がってRubyがインストールされる。

次はsassをインストールする。コマンドプロンプトで次のコマンドを実行しよう。

gem install sass

これで準備OKだ。

sassの実行方法

sassというフォルダにstyle.scssというファイルを作る。次のコマンドプロントで下記のコマンドを実行。バッチでもよい。
@echo off
set LANG=ja_JP.UTF-8
@echo on
rem sass –style expanded –watch *.scss –cache-location sass/.sass-cache
sass –style expanded –watch sass:css –cache-location sass/.sass-cache

バッチにするならこんな感じ。

@echo off
set LANG=ja_JP.UTF-8
@echo on
sass  --style expanded --watch sass:css  --cache-location sass/.sass-cache

実行するとscssフォルダにある拡張子が.scssというファイルに変更があればコンパイルして、cssフォルダへ書き出す。

執筆者：カニ
昔の人は「眠気対策には、スルメを噛むとよい。顎を使うことで脳を刺激して目が覚める」といいました。でも、これは大ウソです。というのは、実際に試したことがあるからです。

あれは去年の夏のことです。眠気対策に有効だと思ってスルメを噛みまくっていました。当時は巷の迷信を信じていたわけです。でも、スルメを噛んでいると頭がすっきりするどころか、逆に熱っぽくなって眠くなっていきました。

これはちょうど、お昼にハンバーガーやラーメンを食べた時と同じ状態です。だから、仕事中や車の運転中にスルメを噛んで眠気を覚まそうとするのはとてもお勧めできません。

関連記事一覧

  1. この記事へのコメントはありません。