less

什么是LESS

Less是一个CSS的预编译器，意思是指它可以扩展CSS语言，添加功能如允许使用变量（variables）、混合（mixins）、函数（function）和其他的技术，让你的CSS更具有维护性，主体性、扩展性。

LESS的官方网站

http://www.lesscss.org/  http://www.lesscss.net/  http://less.bootcss.com

LESS中的注释

在Less中存在了两种注释：//和/**/。

1、//这种注释不会被编译到CSS文件中。

2、/**/以/**/包裹的注释会被编译到css的文件中

请记住：LESS文件只有在编译了之后才能被浏览器识别使用。

LESS的编译工具

我们主要介绍几款常有的：Koala、WinLess、CodeKit

当然好消息就是现在的web IDE（如HBuilder和WebStorm都是默认支持LESS和SASS等的编译的哦）

LESS的变量使用

我在CSS中我们是无法使用变量的，但是在less中我们可以使用变量来完成css的编写，这样的话，整个CSS就灵活多变了，我们可以将一些在CSS中多次出现的量可以定义成变量，这样我们在其他需要使用的地方引用这个定义的变量，注意LESS中变量的命名规范：

1、必须以@符号开头

2、中划线（-）和下划线一个意思（_），建议使用下划线，可以和js保存一致

3、命名有意义，让他人一看就知道该变量是干什么用的

1.将变量当做一个属性存在（不常用，也不建议使用）

2.作为URL存在这个倒是比较常用，因为我们在CSS中经常使用图片，而大型项目的图片和项目有可能分离，所以这个倒是常用的。

3.定义多个相同名称时(面试题)

@num:0;

.aaa{

@num:1;

.bbb{

@num:2;

cc :@num;

@num:3;}

dd:@num;}

注意：在LESS中当一个变量被多次赋值后，我们要看它的级别，越里层优先级别越高，那么cc应该是3（注意，不是2，LESS是编译型语言，不是在前面就一定先执行，会找同级别中最后的值），而dd的值应该是1，因为dd是aaa的子集，它不会继续往里面查找，只会查找同级别。

结果：

.aaa{

dd:1;

}

.aaa.bbb{

cc:3;

}

LESS的混合

在LESS中，我们可以引用已经定义好的样式，同样变量也可以运算的哦~~。

@charset"utf-8";

@b_width:10px;

.nav{

background:#FF5986;

border:@b_width solid #FA2659;

}

.content{

height:@b_width*2;//变量可以运算

color: red;

.nav//可以引用定义好的样式~~

}

在CSS中查看结果：

@charset"utf-8";

.nav{

background:#FF5986;

border:10pxsolid#FA2659;

}

.content{

height:20px;

color: red;

background:#FF5986;

border:10pxsolid#FA2659;

}

传参的使用

同样我们也可以通过传递参数的方式来完成LESS的调用。如

@bg_color: pink;

.border(@w){

border:@w solid @bg_color;

}

我们也可以定义一些样式，在引用样式时给样式传递参数，从而达到不同的修改，方便，快捷的对CSS进行各种操作。

LESS的嵌套

.content{

ul{

list-style:none;

li{

height:30px;

line-height:30px;

padding-left:20px;

background: url(img/arr.jpg)no-repeatcenterleft;

a{

text-decoration:none;

color:#535353;}}}}

在这段代码中我们的所有样式都是在content这个类中的，ul、li、a都是在其中，层次嵌套使用，最后得到我们想要的结果。

但是我们也说了，尽量不要去嵌套的太深，写的太多

LESS的函数

Less也为我们提供了大量的函数供我们使用，如：rgb、darken、lighten、fadein等

LESS的引入

@import less文件名称

使用引入可以再一个less文件中使用另外的less文件中的变量等。

LESS的条件表达式

>、>=、<、<=、=、true、false

.mixin(@a)when(lightness(@a)>=50%){

background-color: black;

}

.mixin(@a)when(lightness(@a)<50%){

background-color: white;

}

.mixin(@a){

color:@a;

}

.class1{.mixin(#7e7e7e)}

.class2{.mixin(#808080)}

LESS的循环

使用递归的方式实现循环。

.loop(@counter)when(@counter>0){

.loop((@counter-1));//递归调用自身4 3 2 1 0

width:(10px*@counter);//每次调用时产生的样式代码50px 40px 30px 20px  10px

}

div{

.loop(5);//调用循环

}

LESS的合并

//+合并以后，以逗号分割属性值

.mixin(){

box-shadow+:inset0010px#555;

}

.myclass{

.mixin();

box-shadow+:0020px black;}

//+_合并以后，以空格分割属性值

.a(){

background+:#f60;

background+_:url("/sss.jod");

background+:no-repeat;

background+_:center;

}

.myclass{

.a()

}

杂项函数

color、convert、data-uri、default

body{

background: data-uri('arr.jpg');

}

.x(2){

y:22;

}

.x(@x)when(default()){

z:@x;}

.div1{

.x(1);

}

.div2{

.x(123);}