less函数的使用 c语言,less即学即用

Less

.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 是虚线;

Less is More ,Than css -少即是多，比css

LESS 类似于Jquery，编译工具Koala编译，先设置成中文关掉重新打开， 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文件里面没有)

变量

在LEss里面定义变量用@ 变量名：值；

@tes_width:300px; .box{ width:@tes_width; height:@tes_width; }

混合

@tes_width:300px; .box{ width:@tes_width; height:@tes_width; .border;}

.border{border:1px solid #fr2}

.box2{

.box;(即拥有box的属性)

margin-left:2px;

}

混合-可带参数

.border_02(@border_width){

border:solid  yellow  @border_width;

}

.test_hunhe{

.border_02(30px);

}

混合-默认带值

.border_03(@border_width：10px){

border:solid  yellow  @border_width;

}

.test_hunhe_03{

.border_03();或者

.border_03(30px);(30px可填可不填)

}

混合例子

.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();

}

匹配模式

.sanjiao{

width:0;

height:0;

overflow:hidden;

border-width:10px;

border-color:transparent transparent red transparent;

border-style: dashed dashed solid dashed;

}

匹配模式

.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;

}

现在就可以这么写：

.sanjiao{

.triangle(bottom,100px);

}