Less（スタイルシート言語）

少ない

デザイン：	アレクシス・セリエ
開発者	アレクシス・セリエ、ドミトリー・ファデエフ
初登場	2009年; 15年前 （2009年）
安定版リリース	4.2.0 [1]  / 2023年9月7日; 14か月前 ( 2023年9月7日)
タイピングの規律	動的
実装言語	JavaScript
OS	クロスプラットフォーム
ライセンス	Apache ライセンス 2.0
ファイル名拡張子	。少ない
Webサイト	より少ないcss
影響を受けた
CSS、サス
影響を受けた
Sass、Less フレームワーク、Bootstrap (v3)

Less ( Leaner Style Sheets 、 LESSと表記されることもある) は、動的なプリプロセッサ スタイルシート言語で、カスケーディング スタイルシート(CSS)にコンパイルしてクライアント側またはサーバー側で実行できます。^[2] Alexis Sellier によって設計された Less はSassの影響を受けており、Sass の新しい "SCSS" 構文にも影響を与えています。SCSS 構文は、CSS のようなブロック フォーマット構文を採用しています。^{[3] Less は}オープン ソースプロジェクトです。最初のバージョンはRubyで書かれていましたが、それ以降のバージョンでは Ruby の使用は非推奨となり、 JavaScriptに置き換えられました。Less のインデント構文はネストされたメタ言語であり、有効な CSS は同じセマンティクスを持つ有効な Less コードです。Less は、変数、ネスト、ミックスイン、演算子、関数などのメカニズムを提供します。Less と他の CSS プリコンパイラの主な違いは、Less ではブラウザによる less.js 経由のリアルタイム コンパイルが可能であることです。^{[2] [4]}

Lessでは変数を定義できます。Less の変数はアットマーク(@) で定義されます。変数の割り当てはコロン(:) で行います。

翻訳中に、変数の値は出力CSSドキュメントに挿入されます。^[2]

@淡い緑色: # 4D926F ; 

#ヘッダー{色: @淡い緑の色; } h2 {色: @淡い緑の色; } 
   

 
   

上記の Less のコードは、次の CSS コードにコンパイルされます。

#ヘッダー{色: #4D926F ; } h2 {色: #4D926F ; } 
   

 
   

ミックスインは、クラス名をそのプロパティの 1 つとして含めることで、クラスのすべてのプロパティを別のクラスに埋め込むことを可能にし、一種の定数または変数として動作します。また、関数のように動作し、引数を取ることもできます。CSS はミックスインをサポートしていません。繰り返されるコードは、各場所で繰り返す必要があります。ミックスインを使用すると、より効率的でクリーンなコードの繰り返しが可能になり、コードの変更も簡単になります。^[2]

.角丸( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @ radius ; -moz- border-radius : @ radius ; border-radius : @ radius ; }      
   
   
   


#ヘッダー{ .rounded-corners ; } #フッター{ .rounded-corners(10px 25px 35px 0px) ; } 
  

 
     

上記の Less のコードは、次の CSS コードにコンパイルされます。

#ヘッダー{ -webkit- border-radius : 5 px 10 px 8 px 2 px ; -moz- border-radius : 5 px 10 px 8 px 2 px ; border-radius : 5 px 10 px 8 px 2 px ; } #フッター{ -webkit- border-radius : 10 px 25 px 35 px 0 px ; -moz- border-radius : 10 px 25 px 35 px 0 px ; border-radius : 10 px 25 px 35 px 0 px ; } 
      
      
      

 
      
      
      

Less には、パラメトリック ミックスインと呼ばれる特殊なタイプのルールセットがあり、同様のクラスに混ぜることができますが、パラメーターを受け入れます。

#ヘッダー{ h1 {フォントサイズ: 26 px ;フォントの太さ:太字; } p {フォントサイズ: 16 px ; a {テキスト装飾:なし;色:赤; &:hover {境界線幅: 1 px ;色: #fff ; } } } } 
   
     
     
  
   
     
     
       
       
       
         
         
      
    
  

上記の Less のコードは、次の CSS コードにコンパイルされます。

#ヘッダーh1 {フォントサイズ: 26 px ;フォントの太さ: bold ; } #ヘッダーp {フォントサイズ: 16 px ; } #ヘッダーp a {テキスト装飾: none ;色: red ; } #ヘッダーp a : hover {境界線幅: 1 px ;色: #fff ; }  
   
   

  
   

   
   
   

   
   
   

Less では、演算と関数を使用できます。演算を使用すると、プロパティ値と色の加算、減算、除算、乗算が可能になり、プロパティ間の複雑な関係を作成できます。関数は JavaScript コードと 1 対 1 でマッピングされ、値を操作できます。

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

#ヘッダー{ color : @ base-color * 3 ; border-left : @ the-border ; border-right : @ the-border * 3 ; } #フッター{ color : @ base-color + #003300 ; border-color : desaturate ( @ red , 10 % ); } 
     
   
     

 
     
    

上記の Less のコードは、次の CSS コードにコンパイルされます。

#ヘッダー{ color : #333 ; border-left : 1 px ; border-right : 3 px ; } #フッター{ color : #114411 ; border-color : #7d2717 ; } 
   
   
   

 
   
   

SassとLessはどちらもCSSプリプロセッサであり、静的なルールではなくプログラミング構造でクリーンなCSSを記述することができます。^[5]

LessはSassにインスピレーションを受けています。^{[6] [3]} SassはCSSを簡素化および拡張するように設計されているため、中括弧などは構文から削除されています。LessはCSSにできるだけ近くなるように設計されているため、既存のCSSを有効なLessコードとして使用できます。^[7]

Sass の新しいバージョンでは、SCSS (Sassy CSS) と呼ばれる CSS のような構文も導入されました。

Less は、さまざまな方法でサイトに適用できます。1 つのオプションは、less.js JavaScriptファイルを組み込んでコードをオンザフライで変換することです。その後、ブラウザーは出力 CSS をレンダリングします。もう 1 つのオプションは、Less コードを純粋な CSS にレンダリングして、その CSS をサイトにアップロードすることです。このオプションでは、.less ファイルはアップロードされず、サイトは less.js JavaScript コンバーターを必要としません。

• Sass (スタイルシート言語)
• スタイラス（スタイルシート言語）

• 公式サイト