出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2025/03/20 07:13 UTC 版)
|
LESSのロゴ
|
|
| 登場時期 | 2009 |
|---|---|
| 設計者 | Alexis Sellier |
| 開発者 | Alexis Sellier, Dmitry Fadeyev |
| 最新リリース | 4.2.2[1]/ 2025年1月4日 |
| 影響を受けた言語 | CSS, Sass |
| 影響を与えた言語 | Sass, Less Framework |
| プログラミング言語 | JavaScript |
| プラットフォーム | クロスプラットフォーム |
| ライセンス | Apache License |
| ウェブサイト | https://lesscss.org/ |
| 拡張子 | .less |
LESS(Leaner CSS)は、Alexis Sellierが設計した動的スタイルシート言語である。 Sassに触発され[2]、後にCSSに似たブロック形式構文を採用した新しいSassの「SCSS」構文に影響を与えている。[3] オープンソースソフトウェアであり、最初のバージョンはRubyで組まれたが、以降は非推奨とされJavaScriptに置き換えられている。 インデント構文はネストされたメタ言語であり、プログラム意味論上、有効なCSSは有効なLESSコードである。 変数、ネスティング、Mixin、演算子及び関数に対応しており、他のCSS用プリコンパイラとの主な違いはブラウザによりLESS.jsを経由してリアルタイムのコンパイルが可能な点である。[4][5] クライアント側とサーバー側で実行でき、[5]単純なCSSにコンパイルできる。
変数定義はアットマークで始まり、代入記号にはコロンを用いる。
変換時に、変数値が出力されCSSに挿入される。[5]
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
コンパイル結果
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
クラス内の属性値に別クラス名を指定することで、クラス属性を別クラスに転用して組み込めるので、定数や変数のように振舞うほか、関数のように引数を使用できる。 CSSはミックスインに対応しておらず、同一コードを各位置に連記する必要がある。 これにより効率的なコーディングや記述の簡略化だけでなく、内容変更を容易にする。[5]
.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により他のセレクタ内部のネストができ、明確な継承や簡略化に役立つ。[5]
#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;
}
共にCSSプリプロセッサとして、規格化したプログラミング記法で整ったCSSを記述できる。[6]
LESSのVer1.4以降はネスティングや、&:extendsと@extends擬似セレクタを経由した継承に対応した。 それ以前のSassなど他のプリプロセッサとの主な違いは、CSSコードの重複回避に役立つ、クラス全体のルールの継承をサポートするための指向的@extends要素の有無であった。
SassはCSSの簡素化(中括弧などの冗長な要素を構文中から削除するなど)し拡張するため設計された。 一方のLESSは可能な限りCSS記法に従い設計されたので、構文は既存のCSSコードと同じであった。 その結果、既存のCSSは有効なLESSコードとして使用できる。
Sassの新Verでは、SCSS(Sassy CSS)と呼ばれるCSSに似た構文を導入した。[3]
より多くの構文の比較については、https://gist.github.com/674726 を参照。
出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2025/10/23 19:05 UTC 版)
|
|
この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。 (2025年10月)
|
|
X端末上で動作するless
|
|
| 作者 | Mark Nudelman |
|---|---|
| 最新版 |
685[1] |
| リポジトリ | |
| プログラミング 言語 |
C |
| プラットフォーム | クロスプラットホーム |
| サポート状況 | 開発中 |
| 種別 | ユーティリティソフトウェア |
| ライセンス | GPL 、BSDライセンス |
| 公式サイト | http://www.greenwoodsoftware.com/less/ |
less(レス)は、Unix系のシステムにおいて、テキストファイルの内容を閲覧するために用いられるプログラム(ページャ)である。moreに似ているが、前方向だけでなく後方向にもスクロールできるよう拡張されている。
構文は次の通りである。
less [options] <file_name>
lessはオプションを指定することで振る舞いを変えることができる。例えば、スクリーン上に表示する行数などである。これらのオプションはシステムによって異なる可能性がある。閲覧中にはさまざまなコマンドが利用できるが、これらのコマンドはmoreやviのものに基づいている。インクリメンタルサーチによるパターン検索も可能である。
デフォルトでは、lessはファイルの内容を標準出力に書き出す。出力が端末以外のものにリダイレクトされた場合、例えばパイプによって別のコマンドに渡された場合、lessはcatコマンドのように振舞う。
lessは1983年にMark Nudelmanによって書かれ、2012年現在はGNUプロジェクトの一部となっている。大抵のオープン・ソースに基づくUnix系システムには含まれているユーティリティである。
オリジナルのlessはそのままでは日本語を表現するために広く用いられていたISO-2022-JP(JISコード)、EUC-JPやShift_JISを正しく表示することができなかった(ただし オリジナルのバージョン346以降はUTF-8の表示への対応を謳っている[2])。
これに対処するためKazushi (Jam) Marukawaらがオリジナルのソースに対するパッチを制作した。パッチを適用したコマンドはjlessと呼ばれており、上記の複数の漢字コードの自動認識、自動変換に対応している。これは日本国内において広く受け容れられ、FreeBSD ports collectionにも含まれている[3]。またMicrosoft Windowsにも移植されている。しかしながらjlessには以下のような問題もある。