10分前CSS言語少ないです

Less 通り  CSS 延長の形、それは去勢ない  CSS 機能が、既存のに  CSS 文法、余分な機能の多くを追加、される  CSS ようにように、変数、相続、操作、機能、およびなどの動的言語機能を、与えられました。

Less 両方のRUN、クライアントにすることができ、ヘルプ（IE 6+、Webkitのは、Firefoxをサポートする）Node.jsサーバ上で実行するように。

 

学習はとても  Less 簡単な作業である、のは、特定の構文を見てみましょう。

以下の文法

1、変数

理解しやすいです。

フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。

1. //変数を設定
2. @niceBlue：＃2182e8。
3. @lightBlue：@niceBlue +＃333;
4. @fontSize：14px;
5.  
6. //変数を使用
7. .p1 {フォントサイズ：@fontSize。色：@niceBlue。}
8. .p2 {フォントサイズ：@fontSize + 4。色：@lightBlue。}

コンパイルされた出力：

1. .p1 {
2. フォントサイズ：14px;
3. 色：＃2182e8。
4. }
5. .p2 {
6. フォントサイズ：18px;
7. 色：＃54b5ff。
8. }

ことに注意してください  Less 完全な「定数」の変数は、それは一度だけ定義することができます。

図2に示すように、混合使用

以内に、私たちは、クラスなどの属性のいくつかの共通セットを定義することができ、その後、別のクラスでは、これらのプロパティを呼び出すこと。ここでは、このようなAクラスがあります：

1. 属性の//セット共通セット
2. .bordered {
3. マージン下：15ピクセル; パディング下：5pxの; border-bottom：1pxの固体の#CCC;
4. }

私たちは別のクラスの属性の共通セットを導入する必要がある場合、この呼び出しができるようになりますように、私たちは、任意のクラスで必要があります。

1. コールに共通の属性の//セット
2. 。題名{
3. フォントサイズ：18px; 色：＃333; フォント重量：太字;
4. .bordered;
5. }
6. .desc {
7. 色：＃666;
8. .bordered;
9. }

コンパイラの出力は、.bordered スタイルであるクラス属性  .title と  .desc 次のように反映さ：

1. 。題名 {
2. フォントサイズ：18px;
3. 色：＃333;
4. フォント重量：太字;
5. マージン下：15ピクセル;
6. パディング下：5pxの;
7. border-bottom：1pxの固体の#CCC;
8. }
9. .desc {
10. 色：＃666;
11. マージン下：15ピクセル;
12. パディング下：5pxの;
13. border-bottom：1pxの固体の#CCC;
14. }

CSSのいずれか  class、  id エレメント、又は属性のセットは、同じ方法で導入してもよいです。

図3に示すように、パラメータを使用して混合

関数のパラメータはプロパティのセットを定義するようにそれほどでは、ことも可能です。

1. .border半径（@radius）{
2. 国境半径：@radius。
3. -mozボーダー半径：@radius。
4. -webkitボーダー半径：@radius。
5. }

そして他のクラスでは、このようにそれを呼び出します。

1. .button {
2. .border半径（計6Px）。
3. }
4. .with {
5. .border半径（10pxの）。
6. }

図4に示すように、ネストされたルール

LESSは、私たちは、ネストされたファッションのCSSで記述することができ、我々はCSSの以下の部分を見てみましょう。

1. ＃ヘッダーロゴ {
2. 幅：200pxの。
3. }
4. ＃ヘッダー.nav {
5. 背景：＃f8f8f8;
6. オーバーフロー：隠されました;
7. }
8. ヘッダNAV {
9. フロート：左;
10. パディング：0 20ピクセル;
11. 行の高さ：30px;
12. トランジション：すべての0.5秒。
13. }
14. ＃ヘッダー.navのLi：ホバー{
15. 背景：#CCC;
16. }

LESSでは、我々は書くことができます。

1. ＃ヘッダ{
2. .logo {幅：200pxの。}
3. .nav {
4. 背景：＃f8f8f8; オーバーフロー：隠されました;
5. {
6. フロート：左; パディング：0 20ピクセル; 行の高さ：30px; トランジション：すべての.5s。
7. ＆：ホバー{
8. 背景：#CCC;
9. }
10. }
11. }
12. }

そのためには、コードがより簡潔であり、それは少しDOM構造形式のように感じています。

なお、  & シンボルの使用を-あなたが代わりに子孫セレクタを書いた一連のセレクタを作成する場合は、使用することができます&。これは、擬似クラス、などに特に有用である  :hover と  :before等。

5、操作

あなたは属性値との間の複雑な関係を達成できるように、以下の任意の数、色または変数は、演算（加算、減算、乗算、除算）に関与しています。例のセットで見てみましょう：

1. @Base：5;
2. @filler：@Base * 2。
3.  
4. .demo4 {
5. パディング：5pxの* @Base。
6. 幅：100％/ 2 + @filler。
7. 色：＃333 - ＃111。
8. 背景色：＃e6ebf9。
9. }

コンパイルされた出力：

1. .demo4 {
2. パディング：25ピクセル;
3. 幅：60％;
4. フォントサイズ：16pxに;
5. 色：＃222222;
6. 背景色：＃e6ebf9。
7. }

また、括弧の使用ができます。

1. .demo4 {
2. ボーダー：（@Base + 2ピクセル）/ 2固体＃333。
3. }

6件のコメント

LESSでのCSSスタイルのコメントはまだ保持されます：

1. / *こんにちは、私はCSSスタイルのコメントです* /
2. .class {色：黒}

LESSはまた、二重スラッシュのコメントをサポートしていますが、CSSにコンパイルするときに自動的にフィルタリング：

1. //こんにちは、私は黙っコメントは、私はあなたのCSSに表示されませんよ
2. .class {色：白}

7、インポート

私たちは、メインファイルに状況を次により.lessファイルを導入することができ、または接尾辞をせずに利用.less：

1. @import "lib.less"。
2. @import "LIB"。

あなたはCSSファイル、LESSをインポートすると、それに対処したくない場合は、あなただけの.css接尾辞を使用することができます。

1. @import "lib.css"。

したがって、それを処理しませLESSをスキップします。

以下のコンパイルツール

1、コアラ

 

視覚的なグラフィカルなフロントエンド言語コンパイラのプリプロセッサツール、比較的簡単な操作、多言語サポートの利点は、リアルタイムのファイルコンパイラを監視し、それがバッチ操作は、Windowsは、Linuxは、Macが完全に実行することができますすることができます。

フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。

2、Node.jsの環境が少ないです

 

1、Windowsインストーラパッケージ（.msi）をダウンロードし、インストール場所を選択：「D：\プログラムファイル\ nodejs」には、 すべての道「次は」することができます。

2は、PATH環境変数がNode.jsのを検出するように構成され、[スタート] => [ファイル名を指定して実行=>タイプは、=>コマンドを入力し、「cmdをpath」「」

3、Node.jsのバージョンを確認します

node --version

4、インストールレス

[Node.jsのコマンドプロンプトで4.1]、次のコマンドを入力します。

1. D：
2. CD D：\プログラムファイル\ nodejs \ node_modules \ NPM
3. //次のコマンドは、注意が-gでなければならない、少ないインストール、または他の他の作業を行うために持っています
4. NPMインストール以下-g
5. //次のコマンドは、プラグインのCSS圧縮をインストールするには
6. NPMインストールあまりプラグインクリーンCSS

4.2インストールが完了した後、次のコマンドを使用することができますlessc

1. //次のコマンドは、以下のCSSファイルの生成をコンパイル
2. lessc D：\ styles.lessのD：\ Styles.cssを
3. //次のコマンドでは、CSSファイル圧縮を生成するために、CSSの圧縮プラグインを有効にします
4. lessc D：\ styles.lessのD：\ styles.min.css -clean-CSS

以下の設定をプリコンパイル--HBuilder 4.3、IDE統合ツール

1. ファイルのサフィックス.less
2. 罰則は、Cコマンド：\ Users \ユーザージェームズ\のAppData \ローミング\ NPM \ lessc.cmd
3. コマンドパラメータ％のFileName %% FileBaseName％の.css

4.4、IDE統合ツール--PhpStorm自動的に以下のCSSをコンパイルするように設定

開閉可能な窓設定ファイル] - > [設定（MAC優先設定を見つけました）。

開封後は、左上隅の検索ボックスで、次のように入力しますファイルウォッチャー（ファイル監視） - ファイル監視の少ない新しいタイプ。