最低限のsass

ドットインストールのSass/SCSS入門を視聴して書いたメモです。

&はその親要素のセレクタを表す

ex)

a {
	text-decoration: none;
	&:hover: {
		font-weight: bold;
		}
}

変数

使えるデータ型：数値、文字列、真偽、色、リスト

• • *の演算ができる

ex)

$baseFontSize: 14px;
$imgDir: “../images/“;
$brandColor: rgba(255, 0, 0, 0.9);

#main {
	width: 90%;
	background: url($imgDir + “bg.png”);
	// background: url(“#{$imgDir}bg.png”); でも可

	p {
		color: $brandColor;
		font-size: $baseFontSize;
		.sub {
			font-size: $baseFontSize - 2px;
		}
	}
}

関数

sassが予め用意している便利な関数 一覧: http://sass-lang.com/documentation/Sass/Script/Functions.html

条件分岐

if,for while（調べて）

ファイルの分離

同一ディレクトリ内に_hoge.scssなどのようにして管理できる。main.scssで読み込むときは

@import “hoge”;

と記述する。

mixin

複数の設定をまとめて管理したいとき使う。@mixinで定義、@includeで呼び出す。

ex)

@mixin round {
	border-radius: 4px;
}

.label {
	font-size: 12px;
	@include round;
}

mixingは引数を持つこともできるし引数は初期値を持つこともできる。

extend

多くの共通する設定をもつ場合extendを使って継承すると便利

ex)

// extendを使わない場合
// background以外は共通している

.errorMsg {
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px;
	color:white;
	background: red;
}

.warningMsg {
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px;
	color:white;
	background: orange;
}

// extendを使った場合

%msg {
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px;
	color:white;
}

.errorMsg {
	@extend %msg;
	background: red;
}

.warningMsg {
	@extend %msg;
	background: orange;
}

注：%はplaceholder selector、詳しくは「Sass 3.2 からは placeholder selector を使おう - https://goo.gl/YOFcyI」

誤解してそうな気もするので何かあったら教えてください。