ブログBlog

- CSS拡張メタ言語について学ぶ~その１~
- 2016年6月14日
- css
- less
- scss
- stylus

みなさんこんにちは。 cssでwebページのスタイリングをする際に便利なのがsass(scss)やlessなどに代表されるcss拡張メタ言語です。そんなcss拡張メタ言語を「なにそれ？」から実際に使うところまで取り上げたいと思います。というわけで今回は、

css拡張メタ言語って何？
どんなことができるの？
どんな種類があるの？

について書いていきます。

css拡張メタ言語って何？

そもそも「css拡張メタ言語って何やねん」ですが読んでそのまま「cssについて記述した言語」となります。ただこれではよく分かりませんね。つまり、cssをプログラミングに近い形で(抽象的に)書くことができる言語のことです。こんな感じで変数使ったりできます。

$hoge:#fff;

.title {
  color: $hoge;
}

↓コンパイル後

.title {
  color: #fff;
}

cssだけでスタイルを書いていると、規模が大きくなってくるとどうしても保守性が落ちてきてしまいます。そういった問題を解決するために作られたのがcss拡張メタ言語というわけです。

どんなことができるの？

何のメタ言語を使うかによって少し異なりますが、どれもおおよそ以下のことができるようになります。

変数

はい、さっきも書きました、変数が使えます。

$hoge:#FF3399;

.title {
  color: $hoge;
}

便利ですね。

制御構文

if文やfor文などです。

$hoge: false;
.title {
    @if $hoge {
        width: 100%;
    }

四則演算

四則演算ができます。

.hoge {
  width: (100%/3);
}

↓コンパイル後

.hoge {
  width: 33.33333%; }

Mixin

@mixin circle($color:white) {
  background: $color;
}

.box1 {
  @include circle(red);
}

.box2 {
  /* 引数を指定しない場合はデフォルト値 */
  @include circle();
}

ファイルのインポート

外部のファイルを読み込むことができます。

//hoge.scss
body {
  width: 100%;
}

//fuga.scss
@import hoge.scss;
.title {
    color: blue;
}

//hoge.css
body {
  width: 100%; }
.title {
    color: blue;
}

どんな種類があるの？

以下の3つが有名です。

上記以外だと以下のものもあります(今回は取り上げません)

Tass
pcss

などさて、それぞれの大まかな特徴はこんな感じです。

sass(scss)

sassは、「Syntactically Awesome StyleSheet」の略です google先生に翻訳してもらうと「文法的に素晴らしいスタイルシート」とのことです。ちなみにscssはsassy cssの略語で、翻訳すると「sassのように記述できるcss」となります。 scssはsassをcssに近い形に定義しなおしたものです。 sassはcssとは文法が異なるため気軽に使えるものではなかったため、scssが登場しました。 sass(scss)はHamlというマークアップ言語から派生したもので、コンパイラーはRubyで実装されています。

less

lessはLeaner cssの略で、翻訳すると「スリムなcss」です。 sassより後発で、cssにコンパイルできるシンプルな記法です。コンパイラはJavaScriptで実装されており、javascriptを利用してクライアントサイドで動的にcssを生成することも可能です。

stylus

stylusはsass(scss),lessよりさらに後発で、lessのシンプルさとsassの機能を合わせた、2つのいいとこ取りをしたような言語です。 node.jsのexpressやjadeと同じ人が開発しています。 Node製なので、使用するにはNode.jsをインストールする必要があります。次回は、css拡張メタ言語でできることを、sass(scss),less,stylusの3つを比較しながら見ていきたいと思います。

この記事を書いた人 : 奥村紘二

その他のスタッフブログ:

一覧へ戻る

CSS拡張メタ言語について学ぶ~その１~