Sassを使ってみました。　( ΘェΘ)ノ – SAITEI no CHINJUU!!!（最低の珍獣）

隣の席に座っている~~次回から長期連載を予定している（！）~~最低の珍獣が

「Sassが、ただただ便利です！」
「Sass最高です!」
「Sassのない制作なんてありえません！！」
「Sassがあればご飯三杯は、いけます！！」
「Sassとビールがあれば、僕の人生はそれだけでいいです！！」

と毎日、言っているので、ついに私もマインドコントロール(?)され、導入する事にしましたｗ

導入とか

まず、そもそも「Sassとは？」とか、導入だったりは、CSS HappyLifeさんの記事が素晴らしく分かりやすいので読んでください。
この記事では割愛します。（逃げ）

以下では使ってみて便利だった事をサンプルコードを交えて解説致します。
※尚、解説するサンプルコードはScss記法（CSS に対して互換性のあるSassの記述形式）で書かれている作業ファイルを「style.scss」とし、書き出されたCSSファイルを「style.css」と致します。

ネストが便利だった！

CSSを書いていると子孫セレクターで以下のように書く事が当たり前のようにありますよね。

/*style.css*/
#main {
	width : 600px;
}

#main p {
	margin-bottom: 1.5em;
}

これをSassでは以下のようにネストして書く事が出来ます。

/*style.scss*/
#main {
	width: 600px;
	p {
		margin-bottom: 1.5em;
	}
}

コレくらいであればコピー＆ペーストでもそれ程時間はかかりませんが、子に当たるものが大量にあると
かなり便利です。

変数が便利だった！

Sassは変数を利用する事が出来ます。
任意の名前を定義して必要な時によびだせるので便利です。

例えば、画像の指定等でよく使うパスだったり、よく利用する色指定だったりを用意しておけば
変更があった際に直ぐに修正をする事が出来ます。

/*style.scss*/
$base-font-color: #000;
/*よく使う色指定*/

$img-path-c:"/common/img/";
/*共通要素の画像のパス*/

#sample {
	width: 300px;
	background: #FFF url(#{$img-path-c}001.png) 0 0 no-repeat;
	color: $base-font-color;
}
/*画像のパスは/が入るので#{変数}のにして呼び出す必要があります。*/

CSSでは以下のように書き出されます。

/*style.css*/
#sample {
	width: 300px;
	background: #FFF url(/common/img/001.png) 0 0 no-repeat;
	color:  #000;
}

@extendが便利だった

@extend機能もかなり便利です。
extendは「延長する」と言う意味の通り、@extendした要素で定義されたものを継承する事が出来ます。

以下の例は、floatを解除する、俗に言う「clearfix」のようなStyleを用意し必要な場面で適用する例です。

/*style.scss*/
.clearfix:after {
	content:"";
	display:block;
	clear:both;
}

.sample001 {
	@extend .clearfix;
}

.sample002 {
	@extend .clearfix;
}

.sample003 {
	@extend .clearfix;
}

「.clearfix」をまず作り、必要な場面（.sample001～.sample003）で適用しています。
CSSでは以下のようになります。

/*style.css*/
.clearfix:after .sample003:after,.sample002:after,.sample001:after{
	content:"";
	display:block;
	clear:both;
}

@mixinが便利だった！

@mixinもこれまた便利でした！

スマートフォンの案件等、CSS3が利用出来る場面ではgradient等をよく利用します。
こんな感じ。

↑これを作るには、↓こんなのを色の指定違いで大量に生産します。

h1#sample001 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#df494a), to(#d72928));
  background-repeat: repeat;
}

2、3個ならコピペで出来る話ですが、10個も20個も作るとなると、少し気が止んできます；
そんな場合は、まず以下のように@mixinを作成します。

/*style.scss*/

@mixin gra001($from,$to){
	background:{
		image:-webkit-gradient(linear, left top, left bottom, from($from),to($to));
		repeat: repeat;
	}
}

@mixinのはプログラムの関数のようなもの（多分）なので、引数を指定持つ事が出来ます。
上記のコードでは引数にgradientの開始時の色、終了時の色を指定出来るようにしています。

@mixinで作った処理は@includeで呼び出せます。

/*style.scss*/
/*gradientの処理*/
@mixin gra001($from,$to){
	background:{
		image:-webkit-gradient(linear, left top, left bottom, from($from),to($to));
		repeat: repeat;
	}
}

/*includeさせる要素*/
h1#sample001 {
  @include gra001(#df494a,#d72928);
}

h1#sample002 {
  @include gra001(#df744a,#d85829);

h1#sample003 {
  @include gra001(#afdf4a,#92c723);
}

/*省略*/

h1#sample010 {
  @include gra001(#827a68,#716b5b);
}

実行結果はこんな感じです。

/*style.css*/
h1#sample001 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#df494a), to(#d72928));
  background-repeat: repeat;
}

h1#sample002 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#df744a), to(#d85829));
  background-repeat: repeat;
}

h1#sample003 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#afdf4a), to(#92c723));
  background-repeat: repeat;
}

/*省略*/

h1#sample010 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#827a68), to(#716b5b));
  background-repeat: repeat;
}

困った事

さて、とっても便利なSassですが困った事がありました。

CSSを書く時、インデントにはTABを使っていたのですが、書き出されたcssファイルを見ると、半角スペースに変換されていました？！
現在、チームのガイドラインでは、インデントにはTABを使う事を定めているので、これ困りました。

解決策としては、sassのプログラムを書き換えれば可能なようです・・・
が、これは少し危険な香りがするので諦め、納品（または公開）前にcssファイルを整形する事にしました。

Dreamweaverであれば「ソースフォーマット」を使えば簡単に出来ると、~~次回から長期連載を予定している（！）~~最低の珍獣が言っていましたｗ
余談ですがVimの場合はノーマルモードで「gg=G」と続けてタイプするとインデントがTABに変換してもらえます。

まとめ

初期の導入や利用する際には、黒い画面を若干触る必要があるので、一見、敷居が高く感じます。
ですが、使ってみると、ただただ便利でしたｗ

Sassの詳しい話については~~次回から長期連載を予定している（！）~~最低の珍獣が詳細に且つ丁寧に世界一分かりやすく教えてくれる　はずです。

(=ΘェΘ)ノヨロシク

追記
SCOUTと言うGUIツールを発見しました。
黒い画面がどうにもと言う方は試してみるのもいいかもしれません。