2.21学習経験の共有#
Bruce_Zhuは2017.2.21
一、LESS基礎
LESSはCSS前処理言語であり、CSS言語を拡張し、変数、Mixin、関数などの特性を増加させ、CSSのメンテナンスと拡張を容易にする.また、LESSはノードまたはブラウザ側で実行できます. 本質的に、LESSにはカスタム構文と解析器が含まれており、ユーザーはこれらの構文に基づいて独自のスタイル規則を定義し、これらの規則は最終的に解析器を通じて対応するCSSファイルをコンパイルして生成する.LESSはCSSの本来の特性を切り取るのではなく、CSSに取って代わるものではなく、既存のCSS文法に基づいて、CSSにプログラム言語の特性を加える. 二、LESSコンパイル方法
方式1クライアントでLESS変換プログラムを実行する、htmlにxxを導入することを知る.less、同時にlessを導入する.jsは、クライアントブラウザで実行できるLESSコンパイラです.効率が低く、推奨されていません. 方式2サービス側で実行するLESS変換プログラム1)は、サーバ側のjs解釈器-nodejs 2)をダウンロードしてインストールするLESSファイルの変換プログラムlessc--jsスクリプト3)をダウンロードし、サーバ側js解釈器でlessc変換器を実行し、自分で作成する.lessファイルからcssファイルに変換する a)
C:\Users\Administrator>node.exe lessc my.less my.css
b) HBuilder
)HTMLファイルでは、コンパイルされたcssファイルを参照する.
方式3 Sublime Textを用いてLESSファイル1を変換)Sublime Textを開き、Ctrl+Shift+Pでプラグインコンソールを呼び出し、LESS 2 CSSプラグインを検索してダウンロードする.2)インストール後、LESSファイルを作成してCtrl+Sを押すと、現在のLESSファイルディレクトリの下で自動的にコンパイルすることができます.CSSファイル(Nodejsのインストールが前提)三.LESS文法学習
LESSはCSS構文を完全にサポートする
LESSは1行コメントと複数行コメントをサポートするが、複数行コメントのみがCSSファイルのに変換される.
LESSサポート変数(variable)@変数名:値使用:セレクタ{スタイル:@変数名} LESSサポートスタイルブレンド-あるスタイルで別のスタイル .class1(){...}
.class2{..
...
.class1
...
}
を参照
パラメトリックブレンド .class()(@ 1，@ 2，。。。){....}
.class2 {
...
.class( 1， 2);
...
}
}
ネスト規則 .class1{
...
.class2 {
}
}
.class1{
}
.class1 .class2{
}