使用方法を減らす guide_html/css_WEB-ITnose

LESSとは? 演算)

関数(関数)

入れ子になったルール(

Nested Rules

)

名前空間(

Namespaces

)

コメント(

コメント)

1、

少ないものとは何ですか

LESSCSS は、動的スタイル言語、CSS 前処理言語です。 CSS に似た構文を使用し、変数、継承、操作、関数などの動的言語機能を CSS に与え、CSS の作成と保守を容易にします。

LESSCSS は、ブラウザ、デスクトップクライアント、サーバーなど、複数の言語と環境で使用できます。

LESSCSS は Alexis Sellier によって設計された動的カスケード スタイル シート言語です。 Sass の影響を受けて、Sass の新しい構文である SCSS にも影響を与えました。 [1]

LESSCSS はオープンソースで、最初のバージョンは Ruby で書かれていましたが、その後のバージョンでは Ruby が JavaScript として徐々に再利用されました。 JavaScript のおかげで、LESS はクライアント (IE6+、Webkit、Firefox) またはサーバー (Node.js、Rhino) で実行できます。

2. 目的 いくつかの経験を加えた学習ノート。同時に、今後は公式文書を参照する必要がなくなることを願っています。中国語公式サイト、英語公式サイト。

3. 文法:

3.1. 変数(変数)

実際には定数と呼ぶべきです。最後の課題しか受けられないからです。

文法規則:

@変数名: value;

値はcss属性値または他の変数にすることができます

3.1.1 css属性値

@backColor: yellow;.a {    background-color: @backColor;}@backColor: blue;.b {    background-color: @backColor;}

コンパイル後: れーれー

より編集最終結果からわかるように、変数の最後の代入結果のみが取得されます。

.a {  background-color: #0000ff;}.b {  background-color: #0000ff;}

3.1.2 変数名は変数として使用されます

@backColor: blue;

コンパイル後:

@com: color;@color: #111;#header {    background-color: @@com + 5 * 2;    color: @color;}

注: は @@ のみをサポートし、>2@ はサポートしません。 3.1.3 スコープ

#header {  background-color: #1b1b1b;  color: #111111;}

コンパイル後:

@color: red;#header {  @color: white;  .a {    color: @color; // white  }}.b {  color: @color; // red  }

LESS の変数スコープの処理方法は、チェーン スコープ メソッドを使用することで、js と一致していることがわかります。上記のネストされた記述方法については、後で説明しますので、今理解する必要はありません。

使い方:

1. スタイルの統一修正（もちろんLESS以前でも仕様で実装可能です）

2. 四則演算（

Operations）、4つしかありませんが、ほとんどの関数を完了できます。

3. ミックスイン (

Mixins

) と組み合わせて使用​​すると、関数のように使用できます

4. フロントエンドエンジニアにとって非常に簡単なチェーンスコープです。理解する。

3.2 Mixins

functionとreuse

の2つの形式に分けます。

最初の悪臭（コードの悪臭）は、通常、Duplicated Code（重複コード）です。の解き方？コードのカプセル化です。ミックスインはそのような機能です。

関数:

#header .a {  color: #ffffff;}.b {  color: #ff0000;}

コンパイルされたコード:

.c(@bg: red) {    background-color: @bg;    width: 100px;    height: 200px;}@bgc: yellow;.a {    .c(@bgc);}@bgColor: @bgc + #111;.b {    .c(@bgColor);}.d {    .c();}

注:

コンパイル後に .c 関連のコンテンツはありません。

@arguments

この書き方はjsの関数パラメータを借用しています。一般的にいくつかの略語で使用されます:

.a {  background-color: #ffff00;  width: 100px;  height: 200px;}.b {  background-color: #ffff11;  width: 100px;  height: 200px;}.d {  background-color: #ff0000;  width: 100px;  height: 200px;}

コンパイル後:

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){    -moz-box-shadow: @arguments;    -webkit-box-shadow: @arguments;    box-shadow: @arguments;}#header {    .boxShadow(2px,2px,3px,#f36);}

再利用:

#header {  -moz-box-shadow: 2px 2px 3px #ff3366;  -webkit-box-shadow: 2px 2px 3px #ff3366;  box-shadow: 2px 2px 3px #ff3366;}

コンパイル後

.d {    .e;}.e {    position: absolute;}#f {    position: relative;;}.m {    #f;}

見つかりましたか? .e コンテンツと #f コンテンツの両方が存在します。

注:

class 属性セットと id 属性セットは同じ方法で再利用できます。

「関数」と「再利用」の違い:

1. 前者はパラメータを渡すことができます。

2. 前者はコンパイル後に存在しませんが、後者はまだ存在します。

使い方:

1. コードのカプセル化; 2. カプセル化後、統一されたスタイルの変更を行うことができます

3. スタイルの再利用、主に「再利用」のため。

3.3 演算子

　　目前仅支持加、减、乘、除四则运算，主要针对数字、颜色、变量的操作。

@baseWith: 100px;@baseHeight: 50px;@baseColor: #333;.a {        height: @baseHeight + 300;    min-width: @baseWith - @baseHeight;    width: @baseWith * 3;    color: @baseColor / 3;}

　　编译后：

.a {  height: 350px;  min-width: 50px;  width: 300px;  color: #111111;}

 　　可以使用（）改变运算的先后顺序

@com: 25px;#header {    width: @com + 5 * 2;    height: (@com + 5 ) * 2;}

　　编译后：

#header {  width: 35px;  height: 60px;}

　　3.4 功能函数（Functions）　　

　　主要针对color的处理。提供如下函数：

lighten(@color, 10%);     // return a color which is 10% *lighter* than @colordarken(@color, 10%);      // return a color which is 10% *darker* than @colorsaturate(@color, 10%);    // return a color 10% *more* saturated than @colordesaturate(@color, 10%);  // return a color 10% *less* saturated than @colorfadein(@color, 10%);      // return a color 10% *less* transparent than @colorfadeout(@color, 10%);     // return a color 10% *more* transparent than @colorspin(@color, 10);         // return a color with a 10 degree larger in hue than @colorspin(@color, -10);        // return a color with a 10 degree smaller hue than @color

　　本人使用的不是很多，想了解更详细的新可以参考官网，或者这里。

　　3.5 嵌套规则（Nested Rules）

　　为了和上面做区分，同时带入一个新功能，以一个新例子开始。html代码如下：

<div id="header">    <h1><a href="http://www.cnblogs.com/hanyangecho/">hanyangecho</a></h1>    <p>我的世界</p></div>

　　LESS代码如下：

#header {    display: inline;    float: left;    h1 {        font-size: 26px;        font-weight: bold;        a {            text-decoration: none;            color: #f36;            &:hover {                text-decoration: underline;                color: #63f;            }        }    }    p {        font-size: 12px;    }}

　　编译之后：

#header {  display: inline;  float: left;}#header h1 {  font-size: 26px;  font-weight: bold;}#header h1 a {  text-decoration: none;  color: #f36;}#header h1 a:hover {  text-decoration: underline;  color: #63f;}#header p {  font-size: 12px;}

　　说实话，第一次看到这种写法的时候，我就爱上LESS了。这不就是DOM的写法吗？这种写法无论后期维护、理解都是那么自然。是不是有一种本来就该如此的感觉？

　　注意一下上面那个&符号。

在Less中嵌套书写中有没有&是完全不一样的效果，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素，我们一起来看一段代码

#header {    &.fl{        float: left;    }    .mln {        margin-left: 0;    }}

　　编译后：

#header.fl { float: left; }#header .mln { margin-left: 0; }

　　3.6 命名空间（Namespaces）

　　这种方式支持我们通过命名空间的方式访问上面嵌套中的“函数”或“复用”。

#header {    .a(@bgColor: red) {        background-color: @bgColor;    }    .b {        width: 100px;    }}.c {    #header > .a(yellow);     #header > .b;    height: 200px;}

　　编译后：

#header .b {  width: 100px;}.c {  background-color: #ffff00;  width: 100px;  height: 200px;}

　　 3.7注释（ Comments）

　　单行：//多行：/**/

 

参考：

　　http://www.w3cplus.com/css/less

　　http://www.lesscss.net/article/document.html