僕がscssでいいなと思う4つの機能とまとめ

Pocket
[`evernote` not found]

今、絶賛流行中のCSSメタ言語のscssですが、流行りに乗っかってエントリーします。
基本的な使い方は、色んな方が記事にされているので、僕は個人的にいいなと思う機能についてまとめてみます。

extendの方が僕の好みです。

Scss=mixinみたいな流れですが、僕的にはextendの方が実用的だと思っています。
mixinは、cssのプロパティセットを使いまわすための機能です。

@mixin hoge {
 font-size:15px;
 font-weight:bold;
}
.hohohoh {
 @include hoge;
 color:red;
}

コンパイルすると

.hohohoh {
 font-size:15px;
 font-weight:bold;
 color:red;
}

みたいな形で展開されます。

それに対して、extendは既存のセレクタのスタイルを継承してくれる機能です。

.hoge2 {
 font-size:15px;
 font-weight:bold;
}
.hohohoh2 {
 @extend .hoge2;
 color:red;
}

コンパイルすると

.hoge2,.hohohoh2 {
 font-size:15px;
 font-weight:bold;
}
.hohohoh2 {
 color:red;
}

上記の例だと、それほど違いはありませんが、適用させたいセレクタが多い場合、extendを使ったほうが圧倒的に展開後のcssのコード量が減りますし、見通しがよくなります。

scssを知る以前から、clearfixは、extendのような書き方をしていたので、個人的にはコチラのほうが好みです。

リスト これは、ほんと神です。

これだけでも使う価値があります。

.goku-Title {
 background: url(images/goku.jpg) no-repeat 0 0;
}
.gohan-Title {
 background: url(images/gohan.jpg) no-repeat 0 0;
}
.goten-Title {
 background: url(images/goten.jpg) no-repeat 0 0;
}
.chichi-Title {
 background: url(images/chichi.jpg) no-repeat 0 0;
}

こんなような似通ったコードを書かなければいけない時。
めんどくせーなぁとか思いながら、気合で書くしかありませんでしたが、scssのリスト機能を使うと・・・

$gokufamilies:goku,gohan,goten,chichi;

@each $gokufamily in $gokufamilies {
 .#{$gokufamily}-Title {background: url(images/#{$gokufamily}.jpg) no-repeat 0 0;}
}

こんな感じで書くことができます。
これなら、セレクタが増えた時も簡単に増やすことができます。

変数 地味に便利。

リストのところでも使っていますが、scssでは変数を使うことができます。

$hoge:10px;//変数

.item {
 padding:$hoge;
}

コンパイルすると

.item {
 padding:10px;
}

文字列も変数にすることができたり、演算することもできるようです。

関数 そこまでできるか!

特定の処理をまとめて関数として利用することができます。
たとえば、ブロックの幅に合わせて子要素の幅を自動で割り出すとか。

@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}
.hogogogog {
     width:getColumnWidth(500px,5);
}

コンパイルすると

.hogogogog {
  width: 92px;
}

via:ドットインストール 

ここまで来ると、もはやプログラミング言語ですね。

まとめ

scssやzen-coedingって、コーディングを効率化するという意味では同じかもしれませんが、根本的に別物だと思っています。Zen-cordingは文法を簡略化して早く書くもの、つまり速記法に近い感覚。
scssはcssの全体像を把握した上で、部分的にまとめることで効率化させるプログラム的なもの。
結局、cssや全体の構成をきちんと把握できていないと、破綻してしまうのかなと思いました。
逆にいえば、scssを使うことで、全体像を考えながらその場しのぎでないcssを書くことができるのかもしれませんが。

実際に実務では導入するにはもう少し検証が必要かな~と思っていますが(運用面のルールとか)、すごく楽しいのでしっかり覚えて行きたいです。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。