Less初次学习笔记(一)

新建.less文件 输入@charset"utf-8";

body{

background-color:red;

}

注释：

/会被编译/

//不会被编译

定义变量语法：@变量名：值

@text_width:100px;

.box_01{

width:(@text_width+2)*5; //变量可以进行运算

color:#ccc-10;

}

混合

box{

width:@text_width;

height:@text_width;

.border;

}

.border{

border:solid 2px #ffffff;

}

//css中的显示结果

.box{

width:100px;

height:100px;

border:solid 2px #ffffff;

}

//混合 -带参数的

.border_02(@boder_width){

border:solid #e3e3e3 @border_width;

}

.test{

border_02(30px);

}

//混合 带默认值的

.border_03(@border_width:10px){

border:solid green @border_width;

}

.test{

border_03();

}

//示例1

border_radius(@radius:5px){

-webkit-border-radius:@radius;

-moz-border-radius:@radius;

border-radius:@radius;

}

//三角示例

.sanjiao{

width:0;

height:0;

overflow:hidden;

border-width:10px;

border-color:red transparent transparent transparent;

border-style:solid dashed dashed 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:solid dashed dashed dashed;

}

.triangle(left,@w:5px,@c:#ccc){

border-width:@w;

border-color:transparent @c transparent transparent;

border-style:dashed solid dashed dashed;

}

.triangle(right,@w:5px,@c:#ccc){

border-width:@w;

border-color:transparent transparent transparent @c;

border-style:dashed dashed dashed solid;

}

.triangle(@_,@w:5px,@c:#ccc){ //都会加载

width:0;

height:0;

overflow:hidden;

}

.sanjiao{

.triangle(left,100px);

}

//嵌套规则

a{

float:left;

//&代表它的上一层选择器

&:hover{

color:red;

}

}

//

.border_arg(@w:30px,@c:red;@xx:solid){

border:@arguments;

//@arguments包含了所有传递进来的参数

}

避免编译 //滤镜、calc()可以用

.test_03{

width:calc(300px-30px); //输出width:270px;

width:~'calc(300px-30px)'; //输出width:calc(300px-30px);

}

//支持!important

http://lesscss.cn/