LESS

LESS

LESSのロゴ
登場時期	2009
設計者	Alexis Sellier
開発者	Alexis Sellier, Dmitry Fadeyev
最新リリース	4.1.2/ 2021年10月4日 (2021-10-04)
影響を受けた言語	CSS, Sass
影響を与えた言語	Sass, Less Framework
プログラミング言語	JavaScript
プラットフォーム	クロスプラットフォーム
ライセンス	Apache License
ウェブサイト	https://lesscss.org/
拡張子	.less

LESS（Leaner CSS）は、Alexis Sellierが設計した動的スタイルシート言語である。 Sassに触発され、後にCSSに似たブロック形式構文を採用した新しいSassの「SCSS」構文に影響を与えている。 オープンソースソフトウェアであり、最初のバージョンはRubyで組まれたが、以降は非推奨とされJavaScriptに置き換えられている。 インデント構文はネストされたメタ言語であり、プログラム意味論上、有効なCSSは有効なLESSコードである。 変数、ネスティング、Mixin、演算子及び関数に対応しており、他のCSS用プリコンパイラとの主な違いはブラウザによりLESS.jsを経由してリアルタイムのコンパイルが可能な点である。 クライアント側とサーバー側で実行でき、単純なCSSにコンパイルできる。

変数

変数定義はアットマークで始まり、代入記号にはコロンを用いる。

変換時に、変数値が出力されCSSに挿入される。

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

コンパイル結果

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixin

クラス内の属性値に別クラス名を指定することで、クラス属性を別クラスに転用して組み込めるので、定数や変数のように振舞うほか、関数のように引数を使用できる。 CSSはミックスインに対応しておらず、同一コードを各位置に連記する必要がある。 これにより効率的なコーディングや記述の簡略化だけでなく、内容変更を容易にする。

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

コンパイル結果

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

ネスティング

CSSは論理的なネスティングに対応しているが、コードブロック自体がネストされていない。 LESSにより他のセレクタ内部のネストができ、明確な継承や簡略化に役立つ。

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    a { 
      text-decoration: none;
      &:hover { 
        border-width: 1px;
      }
    }
  }
}

コンパイル結果

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

関数と演算子

演算子はプロパティの値や色の加減乗除を行い特性間の複雑な関係の作成に活用し、 関数は1対1のJavaScriptコードを使用し値の操作を行う。

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

コンパイル結果

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

比較

Sass

共にCSSプリプロセッサとして、規格化したプログラミング記法で整ったCSSを記述できる。

LESSのVer1.4以降はネスティングや、&:extendsと@extends擬似セレクタを経由した継承に対応した。 それ以前のSassなど他のプリプロセッサとの主な違いは、CSSコードの重複回避に役立つ、クラス全体のルールの継承をサポートするための指向的@extends要素の有無であった。

SassはCSSの簡素化（中括弧などの冗長な要素を構文中から削除するなど）し拡張するため設計された。 一方のLESSは可能な限りCSS記法に従い設計されたので、構文は既存のCSSコードと同じであった。 その結果、既存のCSSは有効なLESSコードとして使用できる。

Sassの新Verでは、SCSS(Sassy CSS)と呼ばれるCSSに似た構文を導入した。

より多くの構文の比較については、https://gist.github.com/674726 を参照。　

外部リンク

• Official LESS website
• LESS source code repository (Git)