sassの機能を簡単にまとめてみた

ようやく、おもーいおもーい腰を上げてsassを触ってみた。
基本的にはドットインストールさんで学ばせてもらったものをまとめてみた。

なんでいままでやらなかったかっていうのは、
「sassってインストールするのメンドイし、いちいちコンパイルしなきゃいけないってのもメンドクサイじゃん！！」っていうのが全てで、そう思っている人も少なからずいるのではないかな。
でも周りがみんな使ってて自分だけ取り残されていく感があったので今回学んでみた。

ひと通りやってみたけどインストールもgem使えば楽だし(実際はgemのverのおかげでめっちゃハマった)、コンパイルとかもファイルの変更を監視して自動でやってくれるので全然メンドクサクナイじゃん！！って感じでした。
更にいうと、sassの学習量を差し引いても作業効率や保守性は上がるんじゃないかな。
だからみんなやってるんだろうしね。

sassについてやインストール手順は以下のサイトを参考にさせてもらった。(てか、これだけ見ればぼくのは不要じゃん。。。)
コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編
CSSの常識が変わる！「Compass」、基礎から応用まで！

そんなこんなで学んだまとめが以下になりますよっと。

/* compassっていうsassのプラグインを使うための読み込み */
@import "compass";

/* ====================================================================
	入れ子を使う
==================================================================== */
#classA {
	font-size: 15px;
	p {
		font-size: 10px;
	}
}

/* ====================================================================
	擬似要素を使う
==================================================================== */
#classB {
	a {
		text-decoration: none;
		color: red;
		&:hover {
			color: blue;
		}
	}
}

/* ====================================================================
	変数を使う
==================================================================== */

/* 数値
==================================================================== */
$baseFontSize: 14px;
#classC {
	font-size: $baseFontSize;
	p {
		font-size: $baseFontSize - 2;
	}
}
/* 色
==================================================================== */
$baseColor: red;
$baseColorRGB: rgba(255,0,0,0.9);
#classD {
	background-color: $baseColor;
	p {
		color: lighten($baseColorRGB, 30%);
	}
	/* compassの機能でベンダープレフィックスを自動補完 */
	@include box-shadow(1px 1px 0 #ccc);
}
/* 真偽値
==================================================================== */
$debugMode: true;
#classE {
	@if $debugMode == true {
		color: red;
	} @else {
		color: blue;
	}
}
/* 文字列
==================================================================== */
$imgDir: "../img/";
#classF {
	background: url($imgDir + "bg.png");
}
#classG {
	background: url("#{$imgDir}bg.png");
}

/* ====================================================================
	ループを使う(@for @while)
==================================================================== */
@for $i from 10 through 15 {
	.fs#{$i} { font-size: #{$i}px;}
}

$i: 20;
@while $i <= 25 {
	.fb#{$i} { font-size: #{$i}px; }
	$i: $i + 1;
}

/* ====================================================================
	リストを使う(@each in)
==================================================================== */
$animals: cat, dog, tiger;
@each $animal in $animals {
	.#{$animal}-icon { background: url("#{$animal}.png"); }
}

@each $animal in cat, dog, tiger {
	.#{$animal}-icon { background: url("#{$animal}.png"); }
}

/* ====================================================================
	関数を使う
==================================================================== */
$totalWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count) {
	$padding: 10px;
	$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);

	/* @debugはターミナルで確認できる */
	@debug $columnWidth;

	@return $columnWidth;
}
.grid {
	float: left;
	width: getColumnWidth($totalWidth, $columnCount);
}

/* ====================================================================
	ファイルを分ける(partials)
==================================================================== */
// 以下の内容を"_setting.scss"に記述する
// $totalWidth: 940px;
// $columnCount: 5;

// 以下の内容を"_function.scss"に記述する
// @function getColumnWidth($width, $count) {
// 		$padding: 10px;
// 		$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
// 		@return $columnWidth;
// }
@import "settings";
@import "functions";
.grid {
	float: left;
	width: getColumnWidth($totalWidth, $columnCount);
}

/* ====================================================================
	@mixinを使う
==================================================================== */
@mixin round1 {
	border-radius: 5px;
}
/* 引数をもたせる */
@mixin round2($radious) {
	border-radius: $radious;
}
/* 引数に初期値をもたせる */
@mixin round3($radious:10px) {
	border-radius: $radious;
}

#classH {
	@include round1;
}
#classI {
	@include round2(7px);
}
#classJ {
	@include round3(9px);
}

/* ====================================================================
	@extendを使う
	@mixinとの違いは各セレクター内にプロパティを展開するか、
	継承してプロパティに設定するかの違いかな、おそらく。
==================================================================== */
.msg {
	font-size: 20px;
	padding: 10px 10px;
	background-color: white;
}

.errorMsg {
	@extend .msg;
	background-color: yellow;
}

.warningMsg {
	@extend .msg;
	background-color: red;
}

今後はもっとフットワーク軽くいきたいですね〜。