とほほのLess入門

目次

Less とは

Less は、CSS をより使いやすく、よりメンテナンスしやすくするための CSS プリプロセッサです。

Less を使用するには

クライアントサイド変換方式

ページを読み込む度にクライアントサイドで Less から CSS に変換するので速度の面では不利ですが、サーバサイド変換方式よりも手軽に Less を試すことができます。Less のファイルを読み込んだ後、less.js (less.min.js) を読み込むことで、Less構文を CSS に変換します。

HTML
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

less.js は下記からもダウンロードすることができます。

通常の Chrome ではセキュリティ設定により、less.js をローカルで動かすことができませんが、Chrome の起動オプションに下記を追加することで、実行可能になります。

コマンドプロンプト
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

URL の最後に #!watch を追加すると、less ファイルの更新を監視し、リアルタイムに変更を反映させることができます。

URL
http://~/~/test.html#!watch

サーバサイド変換方式

Lessコンパイラは、Node.js のパッケージマネージャ npm を用いて下記の様にインストールすることができます。

Linux
$ npm install -g less

Less コンパイラ(lessc)を用いて、Less ファイルをコンパイルします。下記の例では、style.less ファイルを style.css ファイルにコンパイル(変換)しています。

Linux
$ lessc style.less style.css

--clean-css オプションをつけると、minified された CSS ファイルを作成することができます。プラグインがインストールされていない場合は、npm で less-plugin-clean-css プラグインをインストールしてください。

Linux
$ lessc --clean-css styles.less styles.min.css

コメント

通常の CSS のコメント /* ... */ に加え、// から行末までもコメントとみなされます。コンパイルすると // コメントは削除されます。

Less
/* ここはコメント */
/*
 * ここもコメント
 */
// ここもコメント
h1 { color: red; }
CSS
/* ここはコメント */
/*
 * ここもコメント
 */

h1 { color: red; }

インポート

@import を用いて他の Less ファイルをインポートすることができます。拡張子を省略すると ファイル名.less が読み込まれます。

Less
@import "mystyle";  // "mystyle.less"

* { color: @mycolor; }
CSS


* { color: #469; }

@import に続く (...) の中にいくつかのオプションを指定することができます。オプションは下記などを指定します。

Less
@import (optional, reference) "style.less";
CSS

変数

下記の様に、変数(@変数名) を定義・使用することができます。"..." や '...' の中で参照する際は、@{変数名} と記述します。

Less
@mycolor: #369;
@imgdir: "../image";
h1 {
  color: @mycolor;
  borde: 2px solid @mycolor;
  background: url("@{imgdir}/sample.png");
}
CSS


h1 {
  color: #369;
  border: 2px solid #369;
  background: url("../image/sample.png");
}

セレクタやプロパティ名を変数定義することもできます。この場合も @{変数名} で参照します。

Less
@headers: h1, h2, h3, h4, h5, h6;
@property: color;
@{headers} {
  @{property}: black;
}
CSS


h1, h2, h3, h4, h5, h6 {
  color: black;
}

変数名を変数定義することもできます。

Less
@name: "mycolor";
@mycolor: red;
h1 {
  color: @@name;
}
CSS


h1 {
  color: red;
}

変数を定義する場所は、参照する場所より前でも後ろでも構いません。

Less
h1 {
  color: @mycolor;
}
@mycolor: red;
CSS
h1 {
  color: red;
}

演算

加減乗除などの演算を行うことができます。

Less
.mybox {
  width: 200px * 2;
  color: #888888 / 2;
}
Less
.mybox {
  width: 400px;
  color: #444444;
}

関数

小数をパーセントに変換する percentage(), 彩度を高める saturate(), 色を明るくする lighten() など、数多くの関数を使用することができます。

Less
@mycolor: #f00;
.mybox1 { background-color: lighten(@mycolor, 10%); }
.mybox2 { background-color: lighten(@mycolor, 20%); }
.mybox3 { background-color: lighten(@mycolor, 30%); }
CSS

.mybox1 { background-color: #ff3333; }
.mybox2 { background-color: #ff6666; }
.mybox3 { background-color: #ff9999; }

ミックスイン

ミックスイン

ミックスイン(mixin) は、継承用に利用されるクラス定義です。下記の例では、.mybox というミックスインを定義し、これを h4 の CSS 定義で利用(継承)しています。

Less
.mybox {
  border: 1px solid #999;
}
h4 {
  color: #336;
  .mybox;
}
CSS
.mybox {
  border: 1px solid #999;
}
h4 {
  color: #336;
  border: 1px solid #999;
}

引数

下記の様に、引数を受け取るミックスインを定義することができます。

Less
.mybox(@width; @color) {
  border: @width solid @color;
}
h1 {
  .mybox(1px; #666);
}
CSS



h1 {
  border: 1px solid #666666;
}

引数のセパレータ

引数のセパレータにはセミコロン(;) またはカンマ(,)を使用できますが、カンマは他のセパレータとしても使用されることがあるため、引数セパレータにはセミコロンを用いることが推奨されています。

Less
.myfont(@size; @family) {
  font-size: @size;
  font-family: @family;
}
h1 {
  .myfont(9pt; Arial, Courier);
}
CSS



h1 {
  font-size: 9pt;
  font-family: Arial, Courier;
}

引数のデフォルト値

下記の様に、引数にデフォルト値を指定し、名前付き引数を指定することができます。

Less
.mybox(@width: 1px; @color: black) {
  border: @width solid @color;
}
h1 {
  .mybox(@color: #666);
}
CSS



h1 {
  border: 1px solid #666666;
}

引数リスト(@arguments)

@arguments は、すべての引数を参照します。

Less
.mybox(@x:0; @y:0; @blur:1px; @color:#000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
h1 {
  .mybox(@blur:3px);
}
CSS



h1 {
  box-shadow: 0 0 3px #000000;
  -moz-box-shadow: 0 0 3px #000000;
  -webkit-box-shadow: 0 0 3px #000000;
}

残りの引数(@rest...)

@rest... は、残りの引数を参照します。

Less
.mybox(@width; @rest...) {
  border: @width @rest;
}
h1 {
  .mybox(1px, solid, #666666);
}
CSS



h1 {
  border: 1px solid #666666;
}

条件(when)

when (...) により、ミックスインを定義する条件を指定することができます。

Less
@mode: large;
.mybox when (@mode = large) {
  width: 1200px;
}
.mybox when (@mode = small) {
  width: 768px;
}
CSS

.mybox {
  width: 1200px;
}



マッチング

下記の様に、引数にマッチする条件によって適用するミックスインを変更することができます。

Less
.mybox(thin, @color) {
  border: 1px solid @color;
}
.mybox(thick, @color) {
  border: 4px solid @color;
}
h1 {
  .mybox(thin, red);
}
CSS






h1 {
  border: 1px solid red;
}

重要度(!important)

!important を指定すると、CSS 定義に !important が指定されます。

Less
.mybox(@color) {
  color: @color;
}
h1 {
  .mybox(red) !important;
}
CSS



h1 {
  color: red !important;
}

ネストルール

下記の様に、親子の階層をネストして記述することができます。CSS にくらべ、より構造的にスタイルを定義することができます。

Less
#page {
  @mycolor: #469;
  #header {
    color: @mycolor;
  }
  #body {
    color: @mycolor;
  }
  #footer {
    color: @mycolor;
  }
}
CSS


#page #header {
  color: #446699;
}
#page #body {
  color: #446699;
}
#page #footer {
  color: #446699;
}

親セレクタ

& は、親セレクタを示します。

Less
a {
  &:link { color: #369; }
  &:visited { color: #369; }
}


CSS
a:link {
  color: #369;
}
a:visited {
  color: #369;
}

下記の様にして、if 文のような記述をすることができます。

Less
@mode: large;
body {
  & when (@mode = large) {
    padding: 0 20px 0 20px;
  }
}
CSS

body {
  padding: 0 20px 0 20px;
}


ディレクティブのネスト

下記の様に、クラスの中に @media 等のディレクティブを記述することもできます。

Less
.mycolor {
  @media screen {
    color: #f00;
    @media (min-width: 768px) {
      color: #0f0;
    }
  }
  @media tv {
    color: #00f;
  }
}




CSS
@media screen {
  .mycolor {
    color: #f00;
  }
}
@media screen and (min-width: 768px) {
  .mycolor {
    color: #0f0;
  }
}
@media tv {
  .mycolor {
    color: #00f;
  }
}

スコープ

変数のスコープは、通常のプログラミング言語と同様、もっとも内側の { ... } 内で定義されたものが有効になります。

Less
@color: red;
.scopeA {
  @color: green;
  .scopeB {
    color: @color;
  }
}
CSS



.scopeA .scopeB {
  color: green;
}

名前空間とアクセッサ

下記の様にして、いくつかの Mixin を #my_mixins という名前でグルーピングすることができます。グループ中の Mixin を使用するには > を用いますが、> は省略することも可能です。

Less
#my_mixins {
  .color(@color) { color: @color; }
  .border(@color) { border: 1px solid @color; }
}
.mybox {
  #my_mixins > .border(#999);
}
CSS




.mybox {
  border: 1px solid #999;
}

エスケープ

CSS3 の新しい機能や、ブラウザ依存の機能など、Less コンパイラが解釈できず、文法エラーとなってしまう場合、~"..." または ~'...' で Less のコンパイルをエスケープすることができます。

Less
.mybox {
  width: calc(~"100% - 200px");
}
CSS
.mybox {
  width: calc(100% - 200px);
}

extend

&extend(...) を用いることで、単純なクラス名ではないセレクタ (.mytable td など)を継承することができます。

Less
.mytable td {
    color: red;
}
.mytable2 td {
    &:extend(.mytable td);
    border: 1px solid gray;
}
CSS
.mytable td,
.mytable2 td {
  color: red;
}
.mytable2 td {
  border: 1px solid gray;
}

ループ

when と再起呼び出しを用いることでループを実現することができます。

Less
.myloop(@n) when (@n > 0) {
  .col@{n} {
    width: 100px * @n;
  }
  .myloop(@n - 1);
}

.myloop(3);

CSS
.col3 {
  width: 300px;
}
.col2 {
  width: 200px;
}
.col1 {
  width: 100px;
}

値のマージ

プロパティ名の後ろに + をつけると、プロパティ名が重複する場合、値がカンマ(,)で連結されます。

Less
.courier() {
  font-family+: Courier;
}
.helvetica() {
  font-family+: Helvetica;
}
h1 {
  font-family+: Arial;
  .courier();
  .helvetica();
}
CSS






h1 {
  font-family: Arial, Courier, Helvetica;
}


プロパティ名の後ろに +_ をつけると、プロパティ名が重複する場合、値がスペースで連結されます。

Less
.border-width(@width) { border+_: @width; }
.border-color(@color) { border+_: @color; }
.border-style(@style) { border+_: @style; }
h1 {
  .border-width(1px);
  .border-style(sorid);
  .border-color(gray);
}
CSS



h1 {
  border: 1px sorid gray;
}



Copyright (C) 2015 杜甫々
初版:2015年9月13日 最終更新:2015年9月13日
http://www.tohoho-web.com/ex/less.html