Less (Leaner Style Sheets の略) は、下位互換性のある CSS 拡張言語です。、CSS (Cascading Style Sheets) の機能を拡張し、より柔軟で強力なスタイル定義および管理メカニズムを提供します。Less を使用すると、開発者は保守可能で再利用可能なスタイル コードを記述し、簡潔な構文で複雑なスタイル効果を実現できます。この記事では、Less の基本概念と機能、および CSS 開発プロセスを簡素化するために Less を使用する方法を紹介します。さらに詳しく知りたい場合は、 Rhino Book の 中国語版ドキュメントを参照してください。
インストール
Less をインストールするには、まずNode.js 環境がローカルにインストールされていることを確認してから、次のコマンドを実行して Less をシステムのグローバル環境にインストールする必要があります 。
npm install less -gインストールが完了したら、コンソールでコマンドを実行できますlessc -v。関連するバージョン情報が表示されれば、インストールは成功したことになります。
コンパイルして実行する
Vscode などの IED エディターで、接尾辞 . の .less 付いた。
@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }.lessファイルを作成して入力したら、次のステップでは、lessc [option option=parameter ...] <source> [destination]それを接尾辞 ..cssの。たとえば、index.less を Index.css にコンパイルするには、次のコマンドを使用します。
lessc index.less index.css.css コンパイルが完了すると、次の図に詳細を示すように、ファイルを生成できます 。
基本的な使い方
変数
@変数を宣言して使用します。
@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }出力：
#header { width: 10px; height: 20px; }ミキシング (ミキシン)
ミックスインは、あるルールセットから別のルールセットに多数のプロパティを含める (または混合する) 方法です。したがって、次のクラスがあるとします。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }これらの属性を他のルールセットで使用したい場合は、次のように属性が必要な場所にクラスの名前を入力するだけです。
#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }.bordered クラスのプロパティが と に表示され #menu a ます .post a 。(ミックスインとしても使用できることに注意してください #ids 。)
入れ子
Less では、ネストを使用したり、カスケードと組み合わせたりできます。次の CSS があるとします。
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }Less では次のように書くこともできます。
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }生成されるコードはより簡潔で、HTML の構造を模倣しています。
この方法を使用して、疑似セレクターをミックスインにバンドルすることもできます。これは、古典的なclearfixハック（浮動小数点のクリアトリック）をMixins（& 現在のセレクターの親を表す）として書き直したものです。
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }ネストされたルールとバブリング
セレクター @media などの @supports よう に入れ子に@ 规则（at-rule）することができます。规则集at-rule は最上位に配置され、その相対的な順序は同じ内の他の要素に対して変更されません。これをバブリングと呼びます。
.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; } }出力：
.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component { width: 800px; } }オペレーション
算術演算子 +、-、 、は*、/ 任意の数値、色、変数を操作できます。可能な場合、算術演算子は加算、減算、または比較の前に単位変換を実行します。計算の結果は、左端のオペランドのユニット タイプに基づきます。単位変換が無効または無意味な場合、単位は無視されます。無効な単位変換 (例: px から cm への変換、または rad から % への変換)。
// 数字转换为相同的单位 @convert: 5cm + 10mm; // returns 6cm @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // 带变量的示例 @base: 5%; @filler: @base * 2; // returns 10% @other: @base + @filler; // 结果是 15%乗算と除算は数値を変換しません。ほとんどの場合、これは無意味で、長さと長さを乗算すると面積が得られますが、CSS は面積の指定をサポートしていません。Less は数値をそのまま受け取り、明示的に宣言された単位タイプを結果に割り当てます。
@base: 2cm * 3mm; // 结果是6cm色の算術演算を実行することもできます。
@color: (#224488 / 2); // 结果是#112244 background-color: #112244 + #111; // 结果是#223355もちろん、Less の カラー関数の方が 便利だと思うかもしれません。
calc() 特例
_[v3.0.0] でリリース_
CSS との互換性のため、calc() 数式は評価されませんが、変数および入れ子関数内の数式は評価されます。
@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))逃げる
エスケープを使用すると、任意の文字列をプロパティまたは変数値として使用できます。~"anything" or は 、 interpolation~'anything' を除き、そのまま使用されます 。
@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }結果は次のとおりです。
@media (min-width: 768px) { .element { font-size: 1.2rem; } }Less 3.5 以降では、単に次のように記述できることに注意してください。
@min768: (min-width: 768px); .element { @media @min768 { font-size: 1.2rem; } }Less 3.5 以降では、以前は「引用エスケープ」が必要だった多くの状況が不要になりました。
機能
Less は、色の変換、文字列の操作、および数学計算を実行するための関数を提供します。これらについて は、「Less 関数マニュアル」 に詳しく記載されています。
使い方はとても簡単です。次の例では、パーセント関数 (パーセント) を使用して 0.5 を 50% に変換し、色の彩度を 5% 増加させてから、背景色を 25% 明るく設定し、8 度回転させます。
@base: #f04615; @width: 0.5; .class { width: percentage(@width); // 返回 `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }名前空間とアクセサー
CSS または名前空間セレクターと混同しないでください
@namespace。
場合によっては、整理のため、または単にカプセル化を提供するために、ミックスインをグループ化したい場合があります。Less を使用すると、この要件をより直感的に達成できます。後で再利用または配布するために、いくつかのミックスインと変数をバンドルし #bundle たい。
#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ...; } .citation { ...; } }#header a ここで、クラスをミックスインし たい場合は .button 、次のようにすることができます。
#header a { color: orange; #bundle.button(); // 也可以写成 #bundle > .button }#bundle()注: CSS 出力に 名前空間 (たとえば ) を表示したくない場合は 、() 名前空間の末尾に を追加 できます#bundle .tab。
地図
Less 3.5 以降では、ミックスインとルールセットを値マップとして使用することもできます。
#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }これにより、期待される結果が出力されます。
.button { color: blue; border: 1px solid green; }範囲
Less でのスコープ指定は CSS と非常によく似ています。変数とミックスインは最初にローカルで検索され、見つからない場合は「親」スコープから継承されます。
@var: red; #page { @var: white; #header { color: @var; // white } }CSS カスタム プロパティと同様に、ミックスインと変数定義は、それらを参照する行の前に配置する必要はありません。したがって、次の Less コードは前の例と同じです。
@var: red; #page { #header { color: @var; // white } @var: white; }コメント
ブロック スタイルとインライン コメントを使用できます。
/* 一个块注释s * 样式注释！ */ @var: red; // 单行注释 @var: white;インポート中
インポートはほぼ期待どおりに機能します。.less ファイルをインポートすると 、そのファイル内のすべての変数が使用可能になります。ファイルの場合 .less 、拡張子はオプションです。
@import "library"; // library.less @import "typo.css";要約する
以上はプロジェクト構築時に基本的に使えるLessの基本的な使い方を紹介しましたが、さらに詳しく知りたい場合は Rhino Book のLess中国語ドキュメントをご覧ください。
知識の拡大: