less 学习笔记

Less  Css预处理器

1、环境

下载koala，点击设置，将语言设置成简体中文。在自己用的编译器中像平常写页面一样，建文件夹（image css js index.html），然后在css文件夹中新建文件index.less,将css文件夹拖入koala中，右键选择设置编译路径，然后执行编译，出现success则成功，在css文件夹中会出现index.css文件。

2、less中的注释

/*我是被编译的*/ 在css的代码中能够看见

/不会被编译的/ 在css代码中看不见

3、变量

使用@开头，例如：@test_width:300px;

.box{

Width:@test_width;

Height:@test_width;

}

4、混合

.box{

Width:@test_width;

Height:@test_width;

Background:yellow;

.border;

}

.border{

Border:1px solid pink;

}

--------------------------------------------------

.box2{

.box;

Margin-left:100px;

}

混合--带参数

.border_02(@border_width){

Border:solid yellow @border_width;

}

.test_hunhe{

.border_02(30px);

}

混合--默认带值

.border_03(@border_width:10px){

Border:solid green @border_width;

}

.test_hunhe_03{

.border_03();

}

混合的例子

.border_radius(@radius:5px){

-webkit-border-radius:@radius;

-moz-border-radius:@radius;

Border-radius:@radius;

}

.radius_test{

Width:100px;

Height:40px;

Background:yellow;

.border_radius(10px);

}

5、匹配模式

.sanjiao{

Width:0;

Height:0;

Border-width:5px;

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 solid dashed  dashed;

}

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

Border-width:@w;

Border-color: transparent transparent  transparent  @c ;

Border-style:dashed dashed  dashed solid ;

}

//@_是固定格式，让不用每次写三角形的时候都写宽和高为0，意思是无论选择哪个方向的三角形，都要带上@_里面的样式。

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

Width:0;

Height:0;

Overflow:hidden;

}

.sanjiao{

.triangle(top,20px);

}

6、运算

@test_01:300px;

.box_02{

Width:(@test_01-20)*5;//没必要加上px,只要有一个值含有px就行了，这里 @test_01有px;

Color:#ccc-10;//先转化成255的形式，然后在进行运算。

}

7、嵌套

.list{

Width:600px;

Margin:30px;

Padding:0;

List-style:none;

Li{

Height:30px;

Line-height:30px;

Background:pink;

Margin-bottom:5px;

}

A{

Float:left;

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

&:hover{

Color:red;

}

}

}

8、@arguments 变量

@arguments 包含了所有传递进来的参数，如果不想单独处理每一个参数，就可以这样写。

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

Border:@argument;//如果里面的变量都是要改变的话，就可以这样写，比较方 便

}

.test_arguments{

.border_arg(40px);

}

9、避免编译

有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法(也就是当在less中要写一些不需要less解析的代码时，可以使用)

要输出这样的值我们可以在字符串前加上一个~

Width:~’calc(100%-35)’

10、Important

.test_important{

.border_radius() !important;

}