【65：Sass】SassでCSSを楽にする

f:id:seintoseiya:20160515032716j:plain
プロジェクトNo.65

SassとはSyntactically Awesome Stylesheetsの略で、直訳すると「構文的なすごいスタイルシート」です。
Sassで書いたファイルをコンパイルしてcssに出力して使います。
大抵は大規模なサイトや複数人で実装するような現場で使われるようです。

インストール方法とか基本的な使い方は以下のリンクから。
dotinstall.com
コンパイルの自動化は便利で必須ですね。

今回はちょっと横着してSassのソースコードと出力先のCSSだけ紹介します。

変換前ソースコード（Sass）

test.scss

// コメント
/* コメント(CSSにも反映) */

// CSSの様に記述
body{
color:#000;
}

// 変数
$width:900px;
$color:#aabbcc;
$string: "./images/";
$debugMode: true;

// 変数を使用
#hoge{
width:$width+10; // 計算も可能
color:$color;
}

// 文字連結
#hoge1{
background: url($string + "bg.png");
// 文字列内で展開する場合
background: url("#{$string}bg2.png");
}

// 色の関数
#hoge2{
color: lighten($color, 10%); // 少し明るく
color: darken($color, 30%); // 少し暗く
}

// 真偽
#hoge3{
@if $debugMode == true {
color: red;
} @else {
color: green;
}
}

// ループ
// forでfont-size:10pxから14pxのクラスを生成
@for $i from 10 through 14 {
.fs#{$i} { font-size: #{$i}px;}
}

// whileの場合
$i: 10;
@while $i <= 14{
.fsw#{$i} { font-size: #{$i}px;}
$i: $i + 1;
}

// リスト
$animals: cat, dog, tiger;

@each $animal in $animals{
.#{$animal}-icon {background: url("#{$animal}.png");}
}
// こういう書き方もできる
@each $animal in cat, dog, tiger{
.#{$animal}-icon2 {background: url("#{$animal}.png");}
}

// 関数
// ファイルの分割
@import "settings"; // _settings.scssをインポート
@import "functions"; // _functions.scssをインポート

// 関数の使用
.grid{
float: left;
width: getColumnWidth($totalWidth, $columnCount);
}

// プロパティの再利用
@mixin round($radius:4px){ // 仮変数を持たせたり、初期値を設定したりできる
border-radius: $radius;
}
// @mixinを呼び出し
.label{
font-size: 10px;
@include round(10px);
}
.label2{
font-size: 12px;
@include round(10px);
}

// 継承
// @mixinだと全てのセレクタに同じプロパティを持つので、こういった明示的に継承をしている様な場合は@extendを使うとわかりやすく効率が良い
.msg{
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
color: white;
}
.errorMsg{
@extend .msg; // .msgを継承
background: red;
}
.warningMsg{
@extend .msg;
background: orange;
}

_functions.scss

// 関数の定義
@function getColumnWidth($width, $count){
	$padding: 10px;
	$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
	// @debugでコンソールにデバック出力
	@debug $columnWidth;
	@return $columnWidth;
}

_settings.scss

// 関数で使う変数
$totalWidth: 940px;
$columnCount: 10;

出力先（CSS）

test.css

/* コメント(CSSにも反映) */
body {
  color: #000;
}

#hoge {
  width: 910px;
  color: #aabbcc;
}

#hoge1 {
  background: url("./images/bg.png");
  background: url("./images/bg2.png");
}

#hoge2 {
  color: #cad5df;
  color: #536f8a;
}

#hoge3 {
  color: red;
}

.fs10 {
  font-size: 10px;
}

.fs11 {
  font-size: 11px;
}

.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs14 {
  font-size: 14px;
}

.fsw10 {
  font-size: 10px;
}

.fsw11 {
  font-size: 11px;
}

.fsw12 {
  font-size: 12px;
}

.fsw13 {
  font-size: 13px;
}

.fsw14 {
  font-size: 14px;
}

.cat-icon {
  background: url("cat.png");
}

.dog-icon {
  background: url("dog.png");
}

.tiger-icon {
  background: url("tiger.png");
}

.cat-icon2 {
  background: url("cat.png");
}

.dog-icon2 {
  background: url("dog.png");
}

.tiger-icon2 {
  background: url("tiger.png");
}

.grid {
  float: left;
  width: 85px;
}

.label {
  font-size: 10px;
  border-radius: 10px;
}

.label2 {
  font-size: 12px;
  border-radius: 10px;
}

.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}

/*# sourceMappingURL=test.css.map */

参考サイト

www.atmarkit.co.jp
ドットインストールのレッスンの補助的に読むと理解が進むかも。

liginc.co.jp
これも補助的に。CompassというSassを進化させたもの記事ですが、序盤にSassの説明が詳しく書かれてます。

http://cgsc.info/programming/sublime_20150602cgsc.info
これは環境によりますが、私はSublime Text3を使っているので、プラグインを入れてソースコードを見やすくしておきました。
ちなみにこの記事によるとコマンドプロンプト使わなくてもSublime Text3で環境を構築できるようです。