ホームページ > 記事 > ウェブフロントエンド > 使用方法を減らす guide_html/css_WEB-ITnose
LESSとは? 演算)
関数(関数)
入れ子になったルール(
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