Lei Hau'oli（レイハウオリエンジニアブログ）Engineer's Blog

昨今では、CSSプリプロセッサであるSass(SCSS含む)が主流ですが、今回はLessについてご紹介します。内容としては、他のメタ言語は触ったことあるけど、Lessはまだ使ったことない！といった方に向けています。主流であるSassと比較してご紹介していきます。

Lessとは

前述したようにSassと同じくCSS拡張するメタ言語です。

SassがRubyベースであるのに対して、LessはJavaScriptがベースとなっています。あの有名なTwitter - Bootstrapでも使用されている言語です。Sassとの大きな記述の違いはなく、基本的にSassを触った方なら簡単に導入できると思います。

Lessの導入

less.jsを読み込んだり、コマンドラインでのコンパイル、もしくはGUIのコンパイラを使ったりなど、色々なやり方があると思いますが、今回はGruntやGulpなどのタスクランナーを用いての導入方法を説明します。

※Grunt、Gulp自体の導入については省略させていただきます。

プロジェクトのディレクトリ構造は以下のように想定します。

project
├css
│└style.css
├less
│└style.less
├package.json
└Gruntfile.js or gulpfile.js

それぞれ別個に説明していきます。

※どちらも最低限の説明なので、タスクランナーの設定は各自必要なだけ行って下さい。

Gruntの場合

該当ディレクトリにて下記のコマンドを入力します。

npm install grunt-contrib-less --save-dev

Gruntfile.jsの中身は以下のとおりです。

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            develop: {
                options: {
                },
                files: {
                    '/css/style.css': '/less/style.less'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.registerTask('default',['less']);
};

optionsには、gruntjs/grunt-contrib-lessを見て各自必要なものを入れて下さい。ルートとなるパスを設定できたり、Clean CSS(minify)を合わせて実行できたり様々なオプションがあります。

あとはコマンドラインでgruntコマンドを入力すればlessが実行されます。less/style.lessがコンパイルされ、/css/フォルダの中にstyle.cssとして吐出されます。

Gulpの場合

該当ディレクトリにて下記のコマンドを入力します。

npm install gulp-less --save-dev

gulpfile.jsの中身は以下のとおりです。

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css/'));
});
gulp.task('default',['less']);

こちらもコマンドラインでgulpコマンドを入力すればlessが実行されます。

導入については以上です。

Lessの機能

メインとなるLessの機能について説明していきます。

基本的な書き方

基本的にはSassと対して変わらず、ネストを用いて簡潔に記述していくような形です。

/* less */
.module {
    background: #FFF;
    &:after {
        content: "";
        display: table;
        clear: both
    }
    .item {
        float: left
    }
    &-type-b {
        background: #eee;
    }
    #main & {
        background: #AAA;
    }
}

/* css */
.module {
    background: #FFF;
}
.module:after {
    content: "";
    display: table;
    clear: both
}
.module .item {
    float: left
}
.module-type-b {
    background: #eee;
}
#main .module {
    background: #AAA;
}

&には親であるclass名がそのまま代入されるイメージです。例に書いてある通り、&-type-bなどの少し変わった記述も可能です。余談ですが、Sassは以前まで&-type-bのような直接親の文字列が入るような書き方ができなかったのですが、ver3.3からできるようになりました。

変数

Sassでは$記号を変数として用いていましたが、Lessでは下記のように@を使用します。

/* 変数の例 */
@base-font-color: #333;
@page-min-width: 960px

html {
    color: @base-font-color;
    min-width: @page-min-width;
}

定義した@base-font-colorや@page-min-widthが、値の部分に入れることで呼び出されます。

mixin

Sassとやや違いがあるのがこのmixinです。Lessでは定義されているclassをそのまま使用するような形になります。例を見ていただけるとわかりやすいかと思います。

/* mixinの例 */
/* Less */

.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: linear-gradient(to bottom,@startColor, @endColor);
}
.box-a {
    .gradient();
}
.box-b {
    .gradient(#ff0000,#00ff00);
}　

/* mixinの例 */
/* CSS */

.box-a {
    background-color: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#00ff00));
    background: -webkit-linear-gradient(top, #eee, #00ff00);
    background: -moz-linear-gradient(top, #eee, #00ff00);
    background: linear-gradient(to bottom,#eee, #00ff00);
}
.box-b {
    background-color: #ff0000;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#00ff00));
    background: -webkit-linear-gradient(top, #ff0000, #00ff00);
    background: -moz-linear-gradient(top, #ff0000, #00ff00);
    background: linear-gradient(to bottom,#ff0000, #00ff00);
}

例の.gradient()のように()内を空白のまま使用した場合は、元々セットされている値が入り、.gradient(#ff0000,#00ff00)のように値を入れた場合はその値に上書きされます。

extend

元々はextendの機能はなかったのですが、v1.4.0から使えるようになりました。

/* extendの例 */  
/* less */  
.box-a {
    width: 300px
    .inner {
        color: #444;
    }
}
.box-b {
    &:extend(.box-a);
}
.box-c {
    &:extend(.box-a all);
}

/* extendの例 */  
/* CSS */   
.box-a,
.box-b,
.box-c {
    width: 300px
}
.box-a .inner,
.box-c .inner {
    color: #444;
}

Sassとは違い、子孫のセレクタ含めたextendは()内のclassの後にallという記述が必要になります。子孫まで含めたくないという方は、classだけ記述すれば問題ありません。

まとめ

他にもたくさん紹介することはあるのですが、いかんせん全ては説明しきれないため、基本的な部分のみということで今回は以上となります。他の機能も知りたいという方は、是非、Lessの公式サイトをご覧いただければと思います。

主流はSassのイメージですが、いろんな環境があると思うので覚えておいて損はないと思います。煩雑になりやすいCSSをモジュール単位として分割したりすることで管理しやすい形にしたり、その他mixinなどを利用して記述を楽にすることで時間の節約となるので、使わない手はありません。

また、タスクランナーを利用することで、CSSプロパティの整列、minify、またインデントの整理なども合わせて行うことができます。

ただ一方できちんとルールを決めて書かないと、膨大にネストしたセレクタや、ファイル構成がただ複雑になるなど、リスクもありますので、どのメタ言語にしてもきちんとルールを考えて運用しましょう。

Language Features | Less.js