毎日暑いですね。
そろそろ夏らしい髪型にしようかな〜とお考えの方や、
一年の季節は「夏夏夏秋」だと感じているそんなアナタに！！
とっても涼しげな髪型の作り方を〜と、 前置きに長々書いたら「全部カットで。」と言われた二代目ツーブロック担当のboriです。
目次
プリプロセッサーとポストプロセッサーとは？
近年のCSSにはプリプロセッサーとポストプロセッサーなる便利なツールがあります。(ここではツールで一纏めとする)
・プリプロセッサー
独自の言語(メタ言語)で書かれたスタイル構文をCSS構文へと変換してくれる。
例：Sass、Less、Stylus
・ポストプロセッサー
CSS構文を便利なプラグインなどを通してより良いCSSへと変換してくれる。(自動整形やプレフィックス付与など)
例：PostCSS
ここではいずれも変換の事をコンパイルと呼びます。
もう少し分かりやすく説明しましょう。
焼肉屋をイメージしてください。
カルビ = Sass
ハラミ = Less
牛タン = Stylus
七輪 = プリプロセッサー
焼いた肉 = CSS
焼く作業 = コンパイル
生肉の状態ではいくつも種類があります。
それらを七輪で焼きます。
「焼いた肉」にしてしまうのがプリプロセッサーです。
(焼けたカルビだろ！って細かい事は言わずに)
焼けたお肉はタレにつけて食べますよね。
タレのお皿 = ポストプロセッサー
甘口ダレ = 自動整形プラグイン
辛口ダレ = 自動プレフィックスプラグイン
レモン汁 = 関数を使えるようにするプラグイン
お肉の味付けを自由に変えられるのがポストプロセッサーです。
では、プリプロセッサーの時点では味はないのか？
いえいえ。元から味付けが施されたお肉ってありますよね？
Sassなどにも関数を始め、様々な機能がデフォルトで使えます。
しかし、必ずしも全機能が必要とは限りません。
ポストプロセッサーでは必要な機能だけを加えていけるのが特徴です。
プロジェクトの途中で甘口を辞めて辛口に〜なんて事ができます。
どちらにもイイところがあるので、実際に操作してみましょう。
今回はSass,Stylus,PostCSSの３つをご紹介します。
(インストールやコンパイルについては省きます)
Sass
最もメジャーですね。
日本語のドキュメントも多く、GUIの無料コンパイルツールもあるので始めやすいです！
Rubyで作られておりますので、ホスト環境にRubyをインストールする必要があります。(Macは必要なし)
SassとSCSSという2種類の記法がありますが、今回は多く使われるSCSSの記法にて、
ネスト・変数・extend・mixin・importをご紹介します。
ネスト
SCSS
.hoge{ .foo{ color: #000; } .bar{ color: #999; } }
.hoge .foo{ color: #000; } .hoge .bar{ color: #999; }
親のセレクタ内に子のセレクタを書く事でネストを表現できます。
hogeの記述は一回で済み、親子関係も探しやすいですね！
変数
SCSS
$black: #000; .hoge{ .foo{ color: $black; } }
値を変数に代入する事が可能です。
多用する値であれば便利ですね！
extend
SCSS
%hoge{ color: #000; } .foo{ @extend %hoge; font-size: 16px; } .bar{ @extend %hoge; font-size: 20px; }
.foo, .bar{ color: #000; } .foo{ font-size: 16px; } .bar{ font-size: 20px; }
スタイルを継承する事ができます。
継承したセレクタはグループ化され、セレクタが長くなりますので、注意が必要です！
mixin
SCSS
@mixin hoge($color: #000, $size: 14) { color: $color; font-size: $size + px; } .foo{ @include hoge(#999, 18); }
.foo{ color: #999; font-size: 18px; }
スタイルを一式で関数化できます。
値だけが違うスタイルパターンも1つのmixinで対応できるので便利ですね！
import
SCSS
@import "base";
CSSでのimport
@import url("base.css");
機能ごとなどにスタイルファイルを分割しておけば、編集・管理が楽ですよね！
分割したファイルを一纏めにして出力してくれるのがimportになります。
サーバーにアップロードする際、CSSだと分割したファイルもアップする必要がありますが、 Sassでは1つのCSSファイルに集約してコンパイルする事ができるので、 アップするファイルは1つで済みます。
CSSのimportにはブラウザの表示速度が下がるデメリットもありますが、
Sassではコンパイル時にimportをするのと、ファイルサイズの縮小もあり、
その心配はありません！
Stylus
Node.jsで作られているので、Node.jsをインストール必要があります。
Node Loveな人でGulpやPug(Jade)などNode系で統一したい人はいいですね。(？)
そして、Sassで可能な事はStylusでもほとんど可能なんです。
ただ、Sassに比べるとドキュメントの量は少なく、無料のGUIコンパイルツールは無い(たぶん)ので、
若干導入の難易度は上がります。
ここではSassと比較してのちょっとした記法の違いや応用的な使い方についてご紹介します。
変数
Stylus
hoge = #fff;
SCSS
$hoge: #fff;
変数を宣言すると言ったらやっぱりイコールの方がしっくりきますよね。
mixin
Stylus
hoge(color = #000, size = 14) { color: color; font-size: size + px; } .foo{ hoge(#999, 18); }
SCSS
@mixin hoge($color: #000, $size: 14) { color: $color; font-size: $size + px; } .foo{ @include hoge(#999, 18); }
なんという事でしょう。
当然ですがfunctionも修飾子もいりません。
それどころかmixinもincludeも不要なんです。
応用
jsでStylusの変数を共有したいといった場合、
Stylus用のプラグインを使用する事で可能です。
今回は細かい使用方法のご説明は省きますが、
「foovar」というプラグインではStylusの変数をjs側へ出力する事が可能です。
https://github.com/all-user/foovar
github.com
Sassではjsonを介しての値の共有などは可能ですが、
直接的な共有方法は無いのかもしれません。
(ご存知の方はコメントで教えて頂けると嬉しいです)
PostCSS
こちらもNode.jsで作られたツールなんです。
単体ではほとんど意味はなく、様々なプラグインを使うことによってCSSを変換させます。
ここでは例としてAutoprefixerとPostCSS Assetsをご紹介します。
Autoprefixer
.hoge{ display: flex; display: -webkit-flex; }
CSSでは正式に実装されていないプロパティを先行的に使用する事ができます。
その際、プロパティの頭にベンダープレフィックス(接頭辞)と呼ばれるものを付け、
そのプロパティが拡張機能であると明示する必要があります。
また、ベンダープレフィックスはブラウザごとに書き方が異なります。
これらを自動で付与してくれるという文字通りのプラグインがAutoprefixerです。
PostCSS Assets
SCSS
.hoge { background-image: resolve('bg.png'); }
.hoge { background-image: url('/images/bg.png'); }
画像に関する様々機能を有しています。
上記の例では画像名だけで画像のパスを補完してくれる機能です。
その他、画像サイズを取得して値として出力したり、キャッシュ対策として画像のパスにランダムなクエリ文字の追加なども！
結局どれがいいの？
プロジェクトによったりなどはあるかと思いますが、 個人的にはStylus + PostCSSが良いのかなと思います。
理由としては記法の好みとjsとの変数の共有ですね。
ただ、jsでの共有はCSS自体で既にそれが可能(IE11以外)になっていますので、 今後はPostCSSと併用するプリプロセッサーは記法の好みだけになるかもしれません。
そもそも併用はどう...なの？という考えもありますが、 Stylusの機能、Sassの機能をフルで活用しないのであれば、PostCSSのみで良いと思います。
StylusやSassの全機能は欲しい、更に追加であれもこれも欲しいって事なら併用しちゃいましょ！
髪型もCSSの環境も自由に選び、快適なものにしたいですよね。
ちなみに社内ではまだまだ議論の真っ最中で、日々ベスト環境を模索中です！
クイックではベストなCSS環境を考えてくれる方を募集しています。
＼\『明日のはたらくを創る』仲間を募集中です!! /／
919.jp
