-
less:嵌套規(guī)則
查看全部 -
less:運算
查看全部 -
匹配模式less
查看全部 -
?
wdbj?
查看全部 -
一個可編譯 一個不可查看全部 -
Less嵌套：CSS中選擇器的另一種變形，通過CSS選擇器的相互嵌套完成到CSS層次選擇器的轉(zhuǎn)換。其中 & 代表它的上一層選擇器，適用場景，偽類。 代碼示例： ? ?
a { ? ? ? ?
float: left;? ? ? ? ? ? ??
?&:hover { ? ? ? ??//& 代表它的上一層選擇器? ? ?
color: red;? ? ? ??
} ? ?
}
查看全部 -
less匹配模式
.triangle(top,@w:10px,@c:red) { border-width: @w; border-color: transparent transparent @color transparent; border-style: dashed dashed solid dashed; }//箭頭向上的三角形
?.triangle(right,@w:10px,@c:red) { border-width: @w; border-color: transparent @color transparent transparent; border-style: dashed solid dashed dashed; }?//箭頭向右的三角形
.triangle(bottom,@w:10px,@c:red) { border-width: @w; border-color: @color transparent transparent transparent; border-style: solid dashed dashed dashed; }//箭頭向下的三角形
?.triangle(left,@w:10px,@c:red) { border-width: @w; border-color: transparent transparent transparent @color; border-style: dashed dashed dashed solid; } .triangle(@_,@w:10px,@color:red) { width: 0px; height: 0px; overflow: hidden; }?//箭頭向左的三角形
??.triangle(@_,@w,@c) {width:0;height:0;}//默認屬性
div { .triangle(left); }
查看全部 -
? /* 內(nèi)容是被編譯進.CSS文件中 */
// 內(nèi)容不被編譯進.CSS文件中
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Less</title>
</head>
<body>
<style type="text/css">
.sanjiao{
width:0;
height:0;
background: ;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
transparent是透明色;
dashed 是虛線;
</style>
<p>Less is More ,Than css -少即是多，比css</p>
<p>LESS 類似于Jquery，編譯工具Koala編譯，先設(shè)置成中文關(guān)掉重新打開， Draemwi或者sublime 1.先新建目錄，多建一個main.less 2.在main.less寫一個文件頭：@charset"utf-8"然后保存。 3.index.html里面還是引main.css文件。 4.只用在main.less里面寫則main.css里面就有。 5.LESS里面可以使用css里面的注釋/* 我是被編譯的 就是css文件里面有） */ //是不會被編譯的（就是css文件里面沒有）
</p>
<p>變量</p>
在LEss里面定義變量用@ 變量名：值；
<br /> @tes_width:300px; .box{ width:@tes_width; height:@tes_width; }
<br />?
<div>
<p>混合</p>
@tes_width:300px; .box{ width:@tes_width; height:@tes_width; .border;}
<br /> .border{border:1px solid #fr2}
.box2{
.box;(即擁有box的屬性)
margin-left:2px;
}
<p>混合-可帶參數(shù)</p>
.border_02(@border_width){
border:solid? yellow? @border_width;
}
.test_hunhe{
.border_02(30px);
}
<p>混合-默認帶值</p>
.border_03(@border_width：10px){
border:solid? yellow? @border_width;
}
.test_hunhe_03{
.border_03();或者
.border_03(30px);(30px可填可不填)
}
<p>混合例子</p>
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.test_radius{
width:400px;
height:200px;
.border_radius(4px);或者.border_radius();
}
<p>匹配模式</p>
.sanjiao{
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
<div class="sanjiao">
</div>
<p>匹配模式</p>
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color: @c transparent transparent transparent;
border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent @c? transparent? transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent? transparent @c;
border-style: dashed dashed solid dashed;
}
.triangle(@_,@w:5px,@c:#ccc){
width:0px;
height:0px;
overflow:hidden;
}
現(xiàn)在就可以這么寫：
.sanjiao{
.triangle(bottom,100px);
}
</div>
</body>
</html>
查看全部 -
編譯工具-
查看全部 -
Less-
查看全部 -
@arguments變量
查看全部 -
混合-（Mixin）
查看全部 -
Less是css領(lǐng)域的jQuery
查看全部 -
.border_redius查看全部
舉報