アイデアハッカーアイデアハッカーページの先頭へトップに戻る2014年3月14日Web制作CSSの拡張メタ言語、Sassの書き方を簡単に解説するよ!ツイート日頃からCSSを書いている人なら一度は思う「変数とか関数とかネストとか使いてぇ!」を叶えてくれる、魔法の言語『Sass』の魅力を伝えます。最初に注意なんですが、SassはCSSと違って環境の構築が必要です。Sass(SCSS)記法によって書かれた.scssファイルは単体では動かすことが出来ないので、コンパイラを通してCSSに変換する必要があります。環境構築の方法は少し煩雑なので、別の記事で近々解説します。早く使いたいって人は適当にググってね!Sassの記法は2種類SassにはSass記法とSCSS記法の2種類があり、それぞれインデントやセミコロンの扱いが違います。どっちも便利なのには変わりないんですが、今回はよりCSSに近い書き方の出来るSCSSについての紹介です。SCSSは変数や関数などの便利な機能を使うことが出来ますが、基本となる書き方はCSSと全く同じなので、CSSをマスターしている人ならすんなり理解できるはず。それでは、実際のコードを見てみましょう。auto;}「$」を頭に付けると、変数を定義することが出来ます。変数内には数値,カラーコード,別の変数など色々と突っ込めますが、型は特に意識しなくてもOKです。480px;}sample1のような使い方をすることは少ないと思いますが、sample2のようにborderやpaddingの計算をさせるのには便利です。除算も行えるので、グリッドレイアウトなどの計算も簡単になります。#999999;}ややこしい構造のCSSでも、SCSSだとスッキリ記述することが出来ます。「&」を使うと親セレクタを継承することが出来るので、擬似クラスなんかも簡単に書けるようになります。auto;}スタイルの集まりを@mixinで定義して、@includeで呼び出すことが出来ます。使い回すことの多いスタイルをまとめておけば、コーディングの時間をかなり短縮することが出来そうです。1000px;}@mixinの後に「($引数:デフォルト値)」という書式で記述します。引数は複数指定することも可能です。60px;}なんか関数っぽいですね。若干プログラミングっぽくなってきましたが、そんなに難しくはないので是非使って欲しい機能の1つです。他にも色々な機能が!いくつか紹介しましたが、SCSSの機能はこれだけではありません。関数を使ったカラーコード変換などなど、とてもこの記事1本じゃ紹介しきれません...というか@LeoTiger_7も使いこなせてるかどうか微妙です。北海道在住の元気な22歳。右手に酒、左手に煙草、目の前にPCという生活。クズだけどいい人(ただし彼女はいない)。今欲しいのはリボルトの実機。