Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2014年3月14日 Web制作

CSSの拡張メタ言語、Sassの書き方を簡単に解説するよ!


sass 日頃からCSSを書いている人なら一度は思う「変数とか関数とかネストとか使いてぇ!」を叶えてくれる、魔法の言語『Sass』の魅力を伝えます。
まず最初に注意なんですが、SassはCSSと違って環境の構築が必要です。Sass(SCSS)記法によって書かれた.scssファイルは単体では動かすことが出来ないので、コンパイラを通してCSSに変換する必要があります。 sass1 環境構築の方法は少し煩雑なので、別の記事で近々解説します。
早く使いたいって人は適当にググってね!

Sassの記法は2種類

SassにはSass記法SCSS記法の2種類があり、それぞれインデントやセミコロンの扱いが違います。 どっちも便利なのには変わりないんですが、今回はよりCSSに近い書き方の出来るSCSSについての紹介です。

SCSSは変数関数などの便利な機能を使うことが出来ますが、基本となる書き方はCSSと全く同じなので、CSSをマスターしている人ならすんなり理解できるはず。

それでは、実際のコードを見てみましょう。

変数

[scss] $a: 16px; $b: #ff0000; $c: 0 auto; .sample{ font-size: $a; color: $b; margin: $c; } [/scss]
↓ コンパイル後
「$」を頭に付けると、変数を定義することが出来ます。変数内には数値,カラーコード,別の変数など色々と突っ込めますが、型は特に意識しなくてもOKです。

よく使う値を変数に入れておくと、後々変更することになっても変数内の値を書き換えるだけなので楽チン!

演算

[scss] .sample1{ width: 500px + 200px; height: 200px * 5; } $border:2px; $padding:8px; .sample2{ width: 500 - (($border + $padding) * 2); } [/scss]
↓ コンパイル後
sample1のような使い方をすることは少ないと思いますが、sample2のようにborderやpaddingの計算をさせるのには便利です。もちろん除算も行えるので、グリッドレイアウトなどの計算も簡単になります。

スタイルのネスト(入れ子)

[scss] .sample1{ color: #333333; .sample2{ color: #666666; .sample3{ color: #999999; } } } [/scss]
↓ コンパイル後
ややこしい構造のCSSでも、SCSSだとスッキリ記述することが出来ます。

また、「&」を使うと親セレクタを継承することが出来るので、擬似クラスなんかも簡単に書けるようになります。 [scss] a{ color: #4444aa; &:hover{ color: #aaaa22; text-decoration: none; } } [/scss]
↓ コンパイル後
使い所は色々ありそう、というかこの機能のためにSCSSに手を出すくらいの価値はあるかも…?

@mixin

[scss] @mixin foo{ width: 400px; height: 200px; } .sample1{ @include foo; } .sample2{ @include foo; margin: 0 auto; } [/scss]
↓ コンパイル後
スタイルの集まりを@mixinで定義して、@includeで呼び出すことが出来ます。使い回すことの多いスタイルをまとめておけば、コーディングの時間をかなり短縮することが出来そうです。素敵!

@mixin(引数付き)

[scss] @mixin foo($var:200px){ width: $var; height: $var * 2; } .sample1{ @include foo; } .sample2{ @include foo(500px); } [/scss]
↓ コンパイル後
@mixinの後に「($引数:デフォルト値)」という書式で記述します。
また、引数は複数指定することも可能です。 [scss] @mixin foo($a,$b,$c){ width: $a + $b + $c; } .sample1{ @include foo(10px,20px,30px); } [/scss]
↓ コンパイル後
なんか関数っぽいですね。若干プログラミングっぽくなってきましたが、そんなに難しくはないので是非使って欲しい機能の1つです。

他にも色々な機能が!

いくつか紹介しましたが、SCSSの機能はこれだけではありません。
  • CSSにコンパイルした際にコメントを削除する機能
  • .scss内に他のCSSファイルの内容をインポート
  • 任意のクラスのプロパティを丸々コピーしたクラスの作成
  • for文を使った自動クラス生成
  • 関数を使ったカラーコード変換
などなど、とてもこの記事1本じゃ紹介しきれません…というか@LeoTiger_7も使いこなせてるかどうか微妙です。

最初にも言ったとおり、環境の構築には少々時間が掛かりますが、興味のある方は是非!
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
平澤 隆 森田 壮
インプレスジャパン
売り上げランキング: 16,097
関連するかもしれない記事