[Sass]Sass初めて2週間のおじさんが基本をまとめてみる

Sass面白いよー。
だからまとめてみるよー。
SCSSで書いてくよー。

まずは

セレクタの入れ子

.abc {
	border: 1px solid #ccc;
	.def {
		border: 5px solid #333;
	}
}

↓↓↓　コンパイル後　↓↓↓

.abc {
  border: 1px solid #ccc;
}
.abc .def {
  border: 5px solid #333;
}

こんな感じで親セレクタを省略できるメリットがある。
そしてコレが便利だと思ったものがプロパティまで入れ子にできちゃうんです！

.hoge {
	background: {
		image: url(img/hoge.png);
		position: top center;
		repeat: no-repeat;
	}
}

↓↓↓　コンパイル後　↓↓↓

.hoge {
  background-image: url(img/hoge.png);
  background-position: top center;
  background-repeat: no-repeat;
}

&セレクタ

「&」を使うと親セレクタを参照することができちゃう！

a {
	color: #999;
	&:hover {
		color: #f00;
	}
}

↓↓↓　コンパイル後　↓↓↓

a {
  color: #999;
}
a:hover {
  color: #f00;
}

これだけ覚えてくだけでも親セレクタを何度も書かずにすむので便利ですね！

セレクタの継承

あるセレクタの「プロパティ:値」を流用することができるんです！

.hoge1 {
	border: 1px solid #ccc;
	color: #f00;
}
.hoge2 {
	@extend .hoge1;
	background-color: #eee;
}

↓↓↓　コンパイル後　↓↓↓

.hoge1, .hoge2 {
  border: 1px solid #ccc;
  color: #f00;
}

.hoge2 {
  background-color: #eee;
}

変数が！

Sassでは変数が使えるんです！
変数の書き方は

$変数名:値;

と書きます。

$my_width : 900px;
$my_color : #f00;
.hoge {
	width: $my_width;
	color: $my_color;
}

↓↓↓　コンパイル後　↓↓↓

.hoge {
  width: 900px;
  color: #f00;
}

使いまわすような値がある場合は便利！
修正も変数の値を変えるだけでできてしまうんです！

まとめ

まだ他にも@includeや@importなどありますが小分けにして書いて行こうと思います。（ネタがないから・・・）

しかしこれだけでもかなり作業効率はあがります。
ただ入れ子はあまりやり過ぎると訳が分からなくなりますから気をつけたほうがいいですねw