カテゴリ
CSSプリプロセッサ（CSSメタ言語）のお勉強
みなさま、こんにちは！
株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。
世の中で今日は色々大変な日だったようですね。
山梨県では突然の雷雨で、滝のような雨が降りました。
知り合いのトラックドライバーからは、冠水した道路に突っ込んでいったドライバーが水没したのを見て、
「最近の人は危機管理や判断能力がなってないよね」と言ってました。
はたまた緊急地震速報の誤配信で、日本沈没クラスの大地震がきて交通網が大慌てになったり。
特に都会の皆様、大変だったことと思います。
山梨は平和です。
CSSプリプロセッサ（CSSメタ言語）とは？
さて、早速ですが本日はCSSプリプロセッサというものをご紹介したいと思います。
近年、ウェブサイト制作はどんどん複雑になる一途を辿っています。
サイトが昔に比べて大規模になり、Ajax等の動的な動作にも対応しなければならなくなり、
あらゆるデバイスからの閲覧を想定したレスポンシブサイトを作らなければいけなくなり、
CSS3による便利でありながらも、より複雑なコードを書かなければならなくなり、
さらにはブラウザが勝手に血迷って独自機能やリリース前の仕様を先取りして実装したり・・・。
中規模サイトのCSSを書くのにも、CSS設計をしっかりやらなければならない時代となってきました。
しかし、CSSは極めて不完全な言語です。
構造が無駄に複雑で、コードの衝突が起こりやすく、実に整備性が悪いです。
そんなCSSを使いやすくしようとして生まれたのがCSSプリプロセッサです。
CSSプリプロセッサでは、CSSにはない変数やネスト構造でのコーディング、
また関数や四則演算も行うことができちゃいます。
CSSプリプロセッサにもいくつかの種類があります
さて、CSSプリプロセッサにもいくつか種類がリリースされていて、
それぞれに記法も違ってきています。特に有名なのから順にご紹介しましょう。
Sass (Syntactically Awesome Style Sheets)
日本語に訳すと、構文的にすっげースタイルシートです。
今のところ世界中で最も使用されていると思われるCSSメタ言語です。
すべてのCSSバージョンに対応し、ライブラリも多数リリースされていて、
恐らく最もコーディングを簡略化できる言語です。
コンパイラを使用してCSSに書き出して使用します。
拡張子は.sassを使います。
Scss (Sassy CSS)
日本語に訳すと、SassっぽいCSS でしょうか・・・。
Sassと同じ機能を有しているのですが、CSSと極めて似た記法でかけるために導入しやすく、
こちらを使用されるコーダーは多いようです。
コンパイラを使用してCSSに書き出して使用します。
拡張子は.scssを使います。
Less (The Dynamic Stylesheet Language)
日本語に訳すと、ダイナミックなスタイルシート言語です。
名前通り動的な処理をCSSに追加させることができ、クライアントあるいはサーバーサイドで動作させることができます。
ただし、動作させるためにはless.jsファイルをHTML上で呼び出す必要があります。
拡張子は.lessを使います。
CSSでも別にいいんじゃ・・・
そう思うじゃないですか、学習コストもかかるし、新しいことを覚えるのは面倒ですよね。
なんでこんなことするのか試しにCSSとSassを比較してみましょう。
border-radiusを4pxつける場合。
div {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
見慣れたコードですね。これをSassにCompassというフレームワークを使用して書くと
@import "compass" //一番最初に一度だけ宣言します
div
+border-radius(4px)
以上、たったのこれだけです。あとはコンパイルするだけ！
今回だけScssも書いておきますね。
@import "compass"; //一番最初に一度だけ宣言します
div {
@include border-radius(4px);
}
Scssになると、括弧やセミコロンがついてよりCSSっぽくなりました。
でもやはりSassの短さは実に魅力的です。
フォントカラーをSassの変数で管理する場合
まずはCSSで書いてみましょう。フォントカラーはrgbaを使い、rgba(255, 145, 0, 1)として書くとしましょう。
※サンプルのためにわざと冗長的な書き方します。
p {
color: rgba(255, 145, 0, 1);
}
a {
color: rgba(255, 145, 0, 1);
}
これをSassを使用して書く場合
$textColor: rgba(255, 145, 0, 1)
p
color: $textColor
a
color: $textColor
なんてことでしょう。カラーコードをいちいちどこかにメモして書いていたのが馬鹿らしく思えます。
変数によって覚えやすい名前でカラーコードを入れたら、あとは$を先頭に書いて書くだけ。
このように変数で管理することで、カラーコードが揺れることすら防いでくれます。
CSSの継承
CSSを継承することってなんだかんだ言ってよくあると思います。
本当はこの継承を少なくできれば管理もしやすく、コードも流用しやすくなるので良いのですが・・。
さて実際にやってみましょう。
まずはCSSでかいた場合。
header .logoArea h1 {
margin: 0 auto;
text-align: center;
}
header .logoArea h1 img {
width: 300px;
vertical-align: bottom;
}
header .logoArea h2 {
margin: 0 auto;
width: 95%;
color: #2f2f2f;
}
これをSassで書いた場合
$color-head-text: #2f2f2f
$block-centering: 0 auto
header
.logoArea
h1
margin: $block-centering
text-align: center
img
width: 300px
vertical-align: bottom
h2
margin: $block-centering
width: 95%
color: $color-head-text
と、こんな感じにネストして書くことができます。
このように書くことで、同じセレクタを何度も書く必要がなくて、更にどこに紐付いているのか一目瞭然です。
こんなに便利、導入しない選択はない
以上、主にSassにおいて便利な機能を3つ程ご紹介しました。
しかしまだまだ関数や四則演算、さらにはカラーコードの生成に留まらず、
CSSスプライトの生成などもできる超便利なSassは使用しない選択はありません。
実際、コーディングのスピードは明らかにアップしています。
PostCSSとは？？
1年ほど前からまた新たにPostCSSというのが日本でも話題になってきました。
こちらの説明は割愛しますが、JavaScriptで書いたプラグインを使用してCSSを変換するシステムです。
SassやLessよりも軽量で最低限の機能を選択して使うことができ、
かつコンパイル速度も優れて速いと言われ、Bootstrap5ではPostCSSで書かれるそうです。
今からでもSassを導入するか、それともPostCSSを導入するか、悩みどころですが私はもうしばらくSassを使用していこうと思います。
というのも日本でも十分な情報があり、困ったときにも何とかしやすいのはまだまだSassに軍配が上がるからです。
総括
以上、CSSにしても色々なものが登場してきています。
本当はCSSではなく、より新しい言語でオブジェクティブ指向にスタイルが書けるようになるといいんですが、
クライアント環境の整備もあるためそう簡単ではありません。
今はこのようなツールを使用し、より整備しやすいコーディングができるよう精進していきたいと思います。
それではまた来週！
