まとめ

移り変わりの早いウェブ業界。
その中でも今は大きく変化する時期に来ているのかなと、思う。

10数年前、本格的にウェブ制作をしだしたこと、今では当たり前のCSSを使うことができない、使えるようになろうとしなかった人たちが淘汰されていくのを見てきた。

jQueryが流行だしたころもCSSの時ほどではないけど、似たようなことがあった。

今、なんとなくそれと同じような感覚を感じています。

今後どうなるか分からない、であれば新しい技術を身に着けつつ、枯れた技術は正しくしっかりと使いこなすことが大事。

Sass(Scss)にしろCssnext(PostCSS)にしろ、新しいからどうのだけじゃなく、便利で効率よく仕事できるので、使った方が良いですよ。

最初に注意

CSS4なんてもものはないかもしれませんが、分かりやすくするために、今後出てくる新しいCSSをCSS4としています。

ScssやCssnextの話をします

たまにはエンジニアっぽい話もしたいなと思いました。
思ったけども、基本的に何でも屋で仕事してますが、デザイナー兼フロントエンドがもともとの仕事。

なのでCSS関連を今回は。

ここ数年は指定されない限りはCSSはSass（Scss）で書いています。
CSSプリプロセッサは他にもありますが、Scss使ってます。

しかしながら、最近はCssnext（PostCSS）もありかなと思って使っています。

どちらにしても、CSSプリプロセッサを使うにはそれなりの理由があります。

CSSプリプロセッサ、なんやかんやをそれぞれの構文で書いて、CSSに変換して使う感じと思ってください。

そもそもScssを使いだした理由は単純に便利だから。
使いだした当時はLessとどっちにするか悩みましたが、最終的には勘でSass一択に。

SassにしろLessにしろ、cssnextにしろ、最初がとっつきにくそうに感じるかもですが、実際はコンパイル方法さえわかってしまえば、いままでCSS書いていた人なら問題はないくらい簡単なはずです。

そもそも、素のCSS書いても動くわけで。

何が便利

何が便利なのか。

便利機能は山ほどあるのですが、その中でも。

• インポート
• ネスト
• 変数
• オートプレフィクス
• カスタムセレクタやforなどのまとめてなんかするやつ

このあたりでしょうか。

MixinやExtendも便利ですが、いらないこともあります。

インポート

これは素のCSSのインポートとはちょっと違います。

プリプロセッサはコンパイル・トランスパイルして実際に使用するCSSに変換するため、好きなところでインポートできます。

そうして作業時には複数ファイルだったものを1ファイルにまとめて使用することができます。

これは複数人での作業時にも便利です。
作業中は小分けに整頓されたソースコードでわかりやすく編集しつつ、実際の公開している環境では1つのファイルになっているためリクエストを減らしてサイトの表示高速化をサポートすることができます。

ネスト

単純にソースコードが見やすくなります。
多用しすぎるのはどうかなとう場面も多々ありますが、便利です。

/* -------- 
 * CSS
 * ----- */
.foo {
    margin: 10px;
}
.foo a {
    background-color: #fff;
}
.foo a:hover {
    background-color: #000;
}


/* -------- 
 * Scss
 * ----- */
.foo {
    margin: 10px;
    a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

/* -------- 
 * Cssnext
 * ----- */
.foo {
    margin: 10px;
    & a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

ついでに言うと、ネストさせてると.fooを変更したくなった時、そこだけ変えれば他もまとめて済むので手間が省けます。

変数

プログラミングを少しでもしたことがあれば、CSSにも変数欲しいと思いますよね。
ScssやCssnextは変数使えます。

プログラミングをしたことがなくても、そう難しいことではないです。

余談ですが、変数、って呼び方が敷居を上げてるような気がするんですよね。
型指定とかは抜きにして、数以外も格納できるわけで。
昔後輩になんやら教えてたときに、変数なのに文字も？みたいなこと言われたことあります。みんなありますよね？

話を戻します。

CSSにコンパイル後は変数ではなく固定の値としてコンパイルされるものです。
「なんだよ」って思うかもしれませんが、これはこれで便利です。

定数的な感じでもあります。
そんなわけで、「あれってなんだっけ？」を防ぐのにも使えます。
カラーコードを変数に格納して、必要なところで呼び出すなどは、多用しています。

最近はスタイルガイドなどで制作前の段階でしっかりとしたスタイル設計をすることが多いかと思います。

俺の場合も小さなサイトでもクライアントの案件では、スタイルガイドをまず作ります。

スタイルガイドで決められたカラーコードなどを変数に代入。
そうすると、いちいち「あそこの色のコードなんだっけ？」、「こんな感じでいいや」などという状態が防げます。

複数人で作業したり、のちのち作業したりするときも、間違いがなく、統一されたイメージのサイトが作成でき、クオリティが維持しやすくなります。

もちろんコンパイル前の演算にも使えますし、使い方次第ですね。

/* -------- 
 * CSS
 * ----- */
.foo {
    color: #000;
}
.bar {
    background-color: #000;
    color: #fff;
}

/* -------- 
 * Scss
 * ----- */
//変数を作成
$color-black: #000;
$color-white: #fff;

//変数を呼び出してソースを書く
.foo {
    color: $color-black;
}
.bar {
    background-color: $color-black;
    color: $color-white;
}

/* -------- 
 * Cssnext
 * ----- */
/*変数を作成*/
:root {
    --color-black: #000;
    --color-white: #fff;
}

/*変数を呼び出してソースを書く*/
.foo {
    color: var(--color-black);
}
.bar {
    background-color: var(--color-black);
    color: var(--color-white);
}

Cssnextの記述はなんか慣れないし面倒です、個人的に。

オートプレフィクス

ベンダープレフィクスが勝手につくやつね。
これは単純に、まぁ、楽。
こんなん手作業でやるもんじゃないよ、実際。

カスタムセレクタ

Cssnextの機能です。

/* -------- 
 * Cssnext
 * ----- */
/*カスタムセレクタを定義*/
@custom-selector :--foobar .foo, .bar, .baz;

/*カスタムセレクタを使用*/
:--foobar {
    color: #fff;
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.foo,
.bar,
.baz {
    color: #fff;
}

Scssにカスタムセレクタはないですが、eachと配列を使えば同じような事ができます。
プログラムチックですね。

/* -------- 
 * Scss
 * ----- */
//配列を作成
$foobar: '.foo', '.bar', '.baz';

//配列でループ
@each $val in $foobar {
    #{$val} {
        color: #fff;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
 .foo {
    color: #fff;
}
 .bar {
    color: #fff;
}
 .baz {
    color: #fff;
}

もうちょっと工夫すればCssnextの結果と同じようにクラスをまとめて出力もできると思うけど、面倒なのでこれで。

同じようにくるくると回すにはforもあります。
例えばマージン用のクラスを10px刻みで100まで作るとします

/* -------- 
 * CSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}
/*これを100まで繰り返す*/

こんな風に100まで1回コピペと修正をすればできます。
できますが、面倒だしソースの見通しも悪いですね。

で、Scssなら

/* -------- 
 * Scss
 * ----- */
//ループ
@for $i from 1 through 10 {
    $val : ($i*10);
    .mg#{$val} {
        margin: #{$val}px;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}

/* ~ 中略 ~ */

.mg100 {
    margin: 100px;
}

ちゃちゃっとできます。

ね、ScssもCssnextも便利でしょ？

という訳で便利なことが満載です。
これ以外にも便利で効率的な機能がいろいろあります。

CSSを圧縮したりもできちゃうので楽です。

それぞれで、できることできないこともありますが普通にCSS書くより効率的で、ソースコードの管理もしやすくなります。

ScssからCssnext

ScssからCssnext、どちらもCSSを拡張して便利に効率的に制作することができます。

ですが、立ち位置はちょっと違うかなと思います。

ScssはそもそもCSSの不便なところを拡張して便利にするためのもの
CssnextはCSSに新しく実装されるであろう便利機能を、先行して使えるようにするもの

乱暴ですが、こんな感じに考えるといいのかなと。
※Cssnextの構文は策定中の新しいCSSとかけ離れていることももちろんあるので、注意が必要です

そんなわけで、jQuery（Scss）からBabelでES6（Cssnext）みたいな感じに考えてみたらわかりやすいかもしれません。

今後標準化されていくであろう、新しいCSS。
最初にも書きましたが、どうなるかわからないのでCSS4としておきます。

CSS4以降ではCSSプリプロセッサでしかつかないことが、デフォルトで使えるようになる部分もあります。

jQueryから着想を得てJavaScriptの新しいAPIができたことがあるように、SCSSなどをヒントにCSS4以降に新しく追加されるものもあるでしょう。

CssnextはCSS4以降の機能を先行して実装しているところが多いです。
なので、最近はCssnextを使ってみています。

とはいえ、少し上で書いた通り新しいCSSと全く同じとはならないのも事実。

であれば、実際の制作ではもうしばらくはScssでもいいかなと感じているのも事実です。

この辺は好みでいいんでないか？と思いますが、なんにしても勉強しておくに越したことはありません。

Cssnextを使ってみると、今後CSSはこういう風になっていくのかなと将来が感じられたり、Scssとの違いにより一層興味を引かれたりします。

仕事で使うなら

とうことで、実際に業務に使うことを考えたらScssをまずはやってみることをお勧めします。
使われている率も多いですし、資料もググれば沢山出てきます。
プログラム的部分では、分かる人はすぐに楽できますし、分からない人は今後JavaScriptなどをやるきっかけにもなるかもしれません。

個人的結論は

• 仕事ならScss
• 趣味と学習ならCssnext

こうなります

肝心のCSSに変換のコンパイル・トランスパイルの仕方は・・・

nodeでGulpやらwebpackやらなんやらで、とそこまで書いてると長いので・・・調べればいくらでも出てきますしね。

たぶん、この辺でつまずいたり敬遠したりしてる人が多いのではないかなと、とも感じます。
これもそこまで難しくはないんだけどね。

機会があれば初めての人でも簡単に使える、ってところまで書けたらなと言いつつ、今回はこの辺で失礼いたします。

ついでに勉強会の宣伝

勉強会を主催しています。

2017年12月16日土曜日にいつもよりちょっとだけ規模の大きい勉強会をやります。

LT（ライトニングトーク）ともくもく自習の2本柱で行います。
ScssやCssnextも学べるかもです、保証はないですけど・・・。

勉強会はConnpassにて募集しています。
ゆるゆるIT勉強会のConnpass募集ページ

今までの勉強会のことを記事にもしています。
今までのゆるゆるIT勉強会の記事