なぜプリプロセッサ
カスケードスタイルシートのCSSは、それは主に以下の欠陥である、それは任意の構文をサポートする必要はありません、カスタマイズ可能な変数は、などを参照していされていないため、マークアップ言語ではなく、プログラミング言語である、と。
- 文法のような、十分に強力ではありません：書き込みの選択肢のデバイスを複製の多くを書くためのモジュラー必要の発展につながる、入れ子にすることはできません。
- スタイル変数と再利用機構、論理リテラルの形でそのような関連付けられた値がすべきことを繰り返して出力、維持することが困難になる合理的なん
これは、私たちの多くに仕事上の作業負荷を増加する理由をリードしていません。この問題を解決するために、フロントエンドの開発者が不足しているCSSスタイル層の多重化メカニズムを提供しています[] CSSプリプロセッサツールと呼ばれる技術を使用すると、コードの保守性のスタイルを向上させる、冗長なコードを減らします。大幅フロントエンドのスタイルでの開発の効率を向上させることができます。
CSSプリプロセッサとは何ですか
CSSプリプロセッサは新しい言語を定義し、基本的な考え方は、プログラミングCSSに特化したプログラミング言語を使用することですが、CSSファイルは、その後、開発者はちょうどこの言語を使用しますが、ターゲットとして生成され、いくつかの機能が追加されますCSSの作業をエンコードします。「プロジェクトで使用するコンパイラによって通常のCSSファイルに変換し、Webページのデザインスタイルに特化したプログラミング言語を使用して、そして」です。
CSSのCSSプリプロセッサは、いくつかのプログラミング機能を追加するにかかわらず、ブラウザの互換性の問題の、たとえば、あなたはCSSで変数を使用することができ、あなたをすることができますプログラミング言語のシンプルなロジック、関数などの基本的な特性の一部CSSは、多くの利点などのコードを維持するために、より多くの、適応性、シンプル読みやすくかつ容易です。
人気のCSSプリプロセッサ
SASS
サーバ処理により、ルビーに基づき、かつ強力。高解像度効率。未満始めるのは難しい学ぶためのRuby言語、。
もっと少なく
基づきNodeJSは、クライアント・プロセスによって、シンプルに使用します。SASSよりも単純な機能は、必要に応じて効率がSASSよりも低いが、実際の開発で十分ですので、私たちのバックオフィスのスタッフを解析し、LESSを使用することをお勧めします。
スタイラス
2010年には、Node.jsのコミュニティから生成されました。CSSは、主にプロジェクトにプリノードをサポートするために使用され、いくつかは、広い意味の人気が、サポーターのこのコミュニティである完全にSASSに劣るとLESSです。
LESS詳細
以下の文法
注：以下の2件のコメントを持つことができます。
- 最初のコメント：テンプレートのコメント
// 模板注释 这里的注释转换成CSS后将会删除少ないので、ブラウザでのCSSを使用するように変換することができます。（すべてのCSSはこのコメントを認識していた後）、CSSに変換した後、このコメントは削除されます。
- 第二のコメント：CSSのコメント構文
/* CSS 注释语法 转换为CSS后让然保留 */概要：あなたは以下のコメントを記述する場合、我々はコメントを書くお勧めします。それは、第二のノートの使用について、など著作権に似ていない限り。
変数の定義
我々ができ、多くの場合、再利用または変更する価値必要な場合、この変数を参照する変数を使用することができるように定義されます。これは、複製された多くの労力を回避することができます。
（1）以下のファイルでは、可変フォーマットを定義します。
@变量名: 变量值; //格式 @bgColor: #f5f5f5; //格式举例（2）同時に、以下のファイルにこの変数を参照。
次のように最終的には、以下のファイルのコードのフルバージョンは以下のとおりです。
main.less：
// 定义变量 @bgColor: #f5f5f5; // 引用变量 body{ background-color: @bgColor; }以下のように、自動生成されたコードがある（一部は以下のファイルコンパイラを言うの下で）私たちは、上記の後に以下のCSSファイルをコンパイルされたファイルになります。
あるmain.css：
body{ background-color: #f5f5f5; }ネストされた使用方法
頻繁に使用されるCSSセレクタの子孫で、効果は次のようになります。
.container { width: 1024px; } .container > .row { height: 100%; } .container > .row a { color: #f40; } .container > .row a:hover { color: #f50; }上記のコードは、それを書くのは非常に面倒で、多くの層を入れ子になっています。以下のコードを記述するための構文を入れ子になった場合でも、それは比較的簡単です。
次のように例を入れ子になりました：
main.less：
.container { width: @containerWidth; > .row { height: 100%; a { color: #f40; &:hover { color: #f50; } } } div { width: 100px; .hello { background-color: #00f; } } }上記のファイルは、以下のCSSファイルをコンパイルされた後、次のように、自動的に生成されたコードは次のとおりです。
あるmain.css
.container { width: 1024px; } .container > .row { height: 100%; } .container > .row a { color: #f40; } .container > .row a:hover { color: #f50; } .container div { width: 100px; } .container div .hello { background-color: #00f; }MIXIN
ミックスインエフェクトする反復コードとしてロングコードを参照することができるクラス名をそれぞれ参照として、非常に便利であり、クラスに。
（1）クラス定義ファイル:(クラスに重複したカスタムコードが少ないです）
/* 定义一个类 */ .roundedCorners(@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; }上記のコードは、カッコ内の最初の行は、パラメータの内容です：このパラメータは、デフォルト値。
（2）以下に、上記参照クラスファイル：
#header { .roundedCorners; } #footer { .roundedCorners(10px); }上記のコードは、パラメータなしのヘッダ参照、デフォルト値を示すパラメータ、パラメータで参照フッタ、このパラメータを使用します。
インポート
開発段階では、我々は複数のファイルに異なるスタイルを組み合わせることができ、最終的に@importの方法によってマージ。それは彼らが参照されているか、複数の小さいファイルが表示されたときに、ということを意味します。
CSSファイルは多くを持つことができ、以下のファイルも多くのことができます。
（1）以下で参照されるドキュメントを定義
_button.less.btn{ line-height: 100px; color: @btnColor; }注： -以下のファイルを引用し、我々は先行するために使用下線それがあることを示す、ファイルの一部。
_button.lessあなたは、参照することがmain.cssカスタム変数に（2）
main.css上記の参考文献_button1.lessあるmain.css：
@btnColor: red; @import url('_button.less'); //这里的路径写的是相对路径 body{ width: 1024px; }以下のようmain.lessのあるmain.cssのコンパイル後に、自動的に生成されたコードです。
.btn { line-height: 100px; color: red; } body { width: 1024px; }組み込み関数
以下は、話明るくし、2つの組み込み関数を暗くするために、ここで、いくつかの組み込み関数を持っています。
main.less：
body{ backgroud-color: lighten(#000, 10%); //让黑色变亮10% color: darken(#fff, 10%); //让白色变暗10% }以下のようmain.lessのあるmain.cssのコンパイル後に、自動的に生成されたコードです。
あるmain.css：
body { background-color: #1a1a1a; color: #e6e6e6; }以下引用する方法
- 練習は：（以下CSSファイル.lessをコンパイルしたように、環境** NodeJSに応じて、生成された書かれた文書を参照する以下コンパイル。）以下のファイルを書き込んだ後、CSSファイルにそれをコンパイルし、そして、コードで参照cssファイル。
- 練習2：以下のファイルとは直接コードで参照します。実際には、ブラウザ・ラインは、ローカル少ないのCSSファイルにファイルを変換します。
練習2は、コンパイル時よりも多くなりますので、ご使用の製品たら、もちろん、それは、実際の使用です。
通常時に、開発やデモのデモは2を練習することができます。
詳細なスタイラス
インストール
npm install stylus -g基本的な使用
1、新しいインストールディレクトリindex.stylファイルし、新しいインデックスフォルダは、インデックスのindex.htmlに新しいフォルダを作成します。
//css.styl文件 div color:red; //index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div>我是div</div> </body> </html>図2に示すように、入力は、
stylus -w index.styl -o indexCSSファイルに翻訳します。-w index.styl-自動監視css.stylファイルの変更-o index-コンパイルと同じ名前index.cssのインデックスフォルダにファイル3、css.stylに書き込むために直接スタイラス
基本的な構文
例えば、文法自由のために
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div class="div1">我是div1，我有花括号，冒号和分号</div> <div class="div2">我是div2，我无花括号，但有冒号和分号</div> <div class="div3">我是div3，我无花括号、冒号，但有分号</div> <div class="div4">我是div4，我无花括号、冒号、分号</div> <div class="div5">我是div5，我有花括号，但无冒号、分号</div> </body> </html> //index.styl //1、 有花括号，冒号和分号 .div1 { color: red; } //2、 无花括号，但有冒号和分号 .div2 color: green; // 3 、无花括号、冒号，但有分号 .div3 color blue; // 4 、无花括号、冒号、分号 .div4 color greenyellow // 5 、有花括号，但无冒号、分号 .div5{ color rosybrown }変数
変数名に加えて、スタイラスは外@、他の缶で始めることはできません
//html文件 <div class="bianliang"> 变量示范 </div> //styl文件 largeFontSize = 50px $borderStyle=solid .bianliang font-size largeFontSize border 1px $borderStyle redネスティング
//html <div class="parent"> <div class="child"> <p>我是child里的p</p> </div> </div> //styl .parent { border 1px solid red .child { border 2px solid green p { font-size 50px &:hover{ color green } } // hover下面的写法也可以 //p:hover{ // color red // //} } }混入
<div class="mixin1">混入示例1</div> <div class="mixin2">混入示例2</div> setBorder($borderwidth = 1px){ border $borderwidth solid red } .mixin1{ width 200px height 200px setBorder() } .mixin2{ width 100px height 100px setBorder(5px) }実際には、次の構文が派生することができます
border-radius(values){ -webkit-border-radius: values; -moz-border-radius: values; border-radius: values; } div{ border-radius(10px); }受け継ぎます
時には、さまざまな要素のいくつかのCSS文が同じで、相続の構文を使用していない場合、あなたは各要素を個別に実行する必要があり、その後、同じ構文を書き、欠点は必要、それが直接、元のセレクタのスタイルで書くことができないです書き込みに同じスタイルセレクタを再書き込み。あなたが相続の構文を使用している場合は、そのような状況はありません。
<div class="jicheng"> 我是继承示例 <div class="parent1"> 我是parent1 <div class="child1"> 我是child1 <div>我是个没有class和id 的div</div> <p>我是child1里的p--- <span>我是p里的span</span> </p> </div> </div> </div> .reset{ margin 0; padding 0; border 1px solid red } .jicheng{ @extend .reset color red .parent1{ @extend .reset color green .child1{ @extend .reset color blue p{ @extend .reset color yellow } } } }私たちが継承を使用しない場合は、次のように記述する必要があります。
.jicheng, .jicheng .parent1,.parent1 .child1,.child1 p{ margin 0 padding 0 border 1px solid red } .jicheng{ color red .parent1{ color green .child1{ color blue p{ color yellow } } } }カラー
組み込まれている色、彩度の明るさを調整するために使用することができる機能の色、例
<div class="color-function"> 颜色函数 <div class="dark">我变暗了</div> <div class="baohedu">饱和度降低了</div> </div> colorValue=red .color-function{ background-color colorValue .dark{ background-color darken(colorValue,50%) } .baohedu{ background-color desaturate(colorValue,40%) } }演算子
<div class="yunsuanfu"> 运算符例子 </div> .yunsuanfu font-size 30px+30px margin 10px+20px条件
<div class="tiaojian"> <div class="have">条件语句--有margin</div> <div class="have-not">条件语句--没有margin</div> </div> box(x,y,haveMargin=false) padding x y if haveMargin margin x y .tiaojian{ div{ border 1px solid red } .have{ box(10px,10px,true) } .have-not{ box(10px,20px,false) } }イテレーション
<div class="diedai"> 迭代示例 </div> .diedai{ for n in 1 2 3 z-index n }