はじめてのSass入門

SassってCSSを生成するメタ言語。つまりSassで書いたコードはコンパイルするとCSSにです。

Sassのインストール

Mac OS X 1.7 Lionを前提に解説を進めていきますね。

CUIで作業しても良いのですが今回はScout というGUIベースのフリーソフトを利用します。

via Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker

インストールできたらプロジェクトにSassを利用したディレクトリを追加してその中にstyle.scssのように拡張子scssのファイルを作成します。

では早速Sassを書いていきましょう。

まずはネスト

body{
	margin:0;
	h1{
		font-size:12px;
	}
}

といった内容をscssファイルに記述すると書きだされるcssファイルの内容は次の様になります。

body{
	margin:0;
}
body h1{
	font-size:12px;
}

このようにセレクタをネストして書いていくことでセレクタを補完してくれます。

親要素の参照

ネスト中に&を利用すると親要素を参照できます。

a {
	color: #ce4dd6;
	&:hover { color: #ffb3ff; }
	&:visited { color: #c458cb; }
}

このように書くと

a {
	color: #ce4dd6;
}
a:hover {
	color: #ffb3ff;
}
a:visited {
	color: #c458cb;
}

つぎのように変換されます。

変数

$で変数が定義できます。

$main-color: #ce4dd6;
#navbar {
	border-bottom: {
		color: $main-color;
	}
	a {
		color: $main-color;
	}
}

これは以下のように変更されます。

#navbar {
  border-bottom-color: #ce4dd6;
}
#navbar a {
  color: #ce4dd6;
}

使いまわす値が多い場合に便利ですね。

演算

算術演算も可能です

#conatent{
	width:500px+200px
}

と書くと

#conatent {
  width: 700px;
}

に変換されたり

$main-width :500px;
$side-width :200px;
#contain {
	width:$main-width+200px
}

と書いたら

#contain {
  width: 700px;
}

と変換されたりします。

Interpolation

#を利用するとセレクタやプロパティでも変数が利用できます。

$side: top;
.rounded-#{$side} {
  border-#{$side}-radius: 10px;
  -moz-border-radius-#{$side}: 10px;
  -webkit-border-#{$side}-radius: 10px;
}

と書いたら

.rounded-top {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
}

と変換されます。

ミックスイン - Mixins

よく利用する記述は記述する@でMixinsとして定義でき後から使い回しができます。

@mixin clearfix{
	content:"";
	display:block;
	clear:both;
}
#main:after{
	@include clearfix;
}
#comment:after{
	@include clearfix;
}

これが次のように変換されます。

#main:after {
  content: "";
  display: block;
  clear: both;
}
#comment:after {
  content: "";
  display: block;
  clear: both;
}

ミックスインは引数をとることができます。

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

こう書くと

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px;
}
#footer {
  border-top-radius: 5px;
  -moz-border-radius-top: 5px;
  -webkit-border-top-radius: 5px;
}
#sidebar {
  border-left-radius: 8px;
  -moz-border-radius-left: 8px;
  -webkit-border-left-radius: 8px;
}

次のように変換されます。