CSSのlessとはどういう意味ですか?

css では、less は css 言語を拡張して、css の保守と拡張を容易にする前処理言語です。less は、スタイルシートを Web ブラウザで読み取れるように、カスタマイズ可能、管理可能、再利用可能にするプリプロセッサでもあります。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css におけるless の意味

Less は、CSS 言語を拡張し、変数や mixin 、関数などを追加する CSS 前処理言語です。これらの機能により、CSS の保守と拡張が容易になります。

LESS は、Web サイトのカスタマイズ、管理、再利用可能なスタイル シートを可能にする CSS プリプロセッサです。 LESS は、CSS の機能を拡張する動的スタイル シート言語です。 LESS はクロスブラウザーにも対応しています。

CSS プリプロセッサは、CSS を拡張し、Web ブラウザで読み取れるように通常の CSS 構文にコンパイルするスクリプト言語です。動的 CSS を構築するための変数、関数、ミックスイン、アクションなどの機能を提供します。

Less を使用すると、変数の定義、ネストされた宣言の使用、関数の定義などが可能になります。厳密に言うと、Less は (1) Less 構文と (2) Less プリプロセッサの 2 つの部分で構成されます。結局のところ、ブラウザは CSS しか理解できないため、Less ファイルは Less プリプロセッサを通じて CSS にコンパイルする必要があります。

例は次のとおりです:

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

出力は次のような CSS コードです:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSのlessとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。