とほほのLess入門

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

Less を使用するには

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

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

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

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

サーバサイド変換方式

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

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

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

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...)

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;
}

リンク

初版:2015年9月13日最終更新:2015年9月13日

http://www.tohoho-web.com/ex/less.html

Less とは

Less を使用するには

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

サーバサイド変換方式

コメント

インポート

変数

演算

関数

ミックスイン

ミックスイン

引数

引数のセパレータ

引数のデフォルト値

引数リスト(@arguments)

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

条件(when)

マッチング

重要度(!important)

ネストルール

親セレクタ

ディレクティブのネスト

スコープ

名前空間とアクセッサ

エスケープ

extend

ループ

値のマージ

リンク