less基础教程

less基础教程：

写原生CSS，会让页面结构越来越混乱，几乎看不出层次结构。（less推荐写嵌套结构）

需要通过进行预编译，让嵌套的css转换成能让浏览器能够识别的样式，而没有误差。

引入less:（其实还有其它预处理器，不过功能都差不多sass和stylus等）

http://www.frontendjs.com/

前站  文档栏就有官网：

 

如果直接引入一个less代码，需要引入一个less预处理器：

<style type="text/less">

使用less编写的css代码；

</style>

通过引入less.js对less文件进行预编译（用less写的css代码嵌套结构）；

<script src="less/less-min.js"></script>

但是这个会耗费js性能，可以在编写的时候进行预编译，上线的话需要将less编写的通过编译成完整的css文件，再引入css，不直接使用less就能不耗费线上资源

上述的过程可以通过node来跑，也就是说其实可以在服务器端对less文件进行预编译。

编译不影响上线的运行时间（开发人员在开发时自己编译的）（提高开发效率，便于管理代码块）

less编译工具：

koala-app.com

 

less基础：

less中的注释：

 //注释不会被写到用户界面的css中

/**/注释会被写到编译之后的css上；

 

less中的变量：

使用@来申明一个变量@pink:pink；

1.作为普通属性来使用直接@pink;

2.作为选择器和属性名：#@{selector的值}的形式

3.作为URL：@{url}

4.变量的延迟加载：less中的变量都是延迟加载的。（变量的值，是在加载完毕之后确定的，后面的值会覆盖前面设置的值，它不是边加载边编译，这就导致了变量不能动态的变化）

 

变量的作用：方便维护更改主色调等等，对于一些可变的量比较多的时候。

@变量名：原属性;

使用变量做属性则：

@{变量名}:属性值；

 

使用选择器作为变量：

@变脸名:选择器名：

使用变量：

@{变量名}{

}

 

less的嵌套规则：

less编译的时候，大括号和小括号是父子关系会自动的添加空格，而这样的话伪元素就失效了（可以使用&消除这个空格表示是同级选择器）；

 

less混合：

混合就是将一系列属性从一个规则集，引入到另一个规则集的方式；（和定义变量的方式差不多，使用  .  定义，然后将需要混合的声明放入，在其他需要调用的地方使用   .混合名（就是将声明语句全部烤过来了）;）

注意如果直接使用：

.混合名{

}

那么这段代码会被解析到css文件中，而这个文本不会被调用，也就有问题；需要使用()来组织less将它编译到css中

.混合名(){

}

1.普通混合

.混合名{

}

2.不带输出的混合

.混合名(){

}

3.带参数的混合    (长得像函数，但是这个混合需要在调用的时候填写参数值，这些参数都是会被运用在声明中的)

.混合名(@a,@b,@c){

}

4.带参数和默认值的混合    （使用:为参数设置一个默认值，当没有输入参数的时候应用默认值）

.混合名(@a:100px,@b:blue,@c:10deg){

}

5.带多个参数的混合

.混合名(@a,@b,@c){

}

6.命名参数（当传入少于声明变量时，默认忽略后面的变量，而且顺序一定，这里可以在调用的时候通过@变量名:参数为指定变量设置参数）

 

7.匹配模式（）

可以使用@import “引用其他less文件”；

1.可以使用不是声明的变量放入括号中做标识符

.混合名(L,@a,@b,@c){

}

有了这个标示符，可以用来区分，同混合名，不同的规则（定义了多个同混合名，不同的规则的混合。）

2.可以使用

.混合名（@_）{

}

这里面存储的内容，每一个同混合名都会自动调用它，不需要主动在混合中放入多余的其他混合了；（减少代码量）

 

8.arguments变量

传递的实参列表，直接将参数列表整体表示

调用：@arguments

 

less的计算：

less计算中只需要计算的参数一方带有单位就行了；

width:(123+12px);(包含四则运算)

 

less继承：

在less可以写css原生代码；

由于嵌套的话没有,合并的概念，这样less编译出来的css文件是比自己手写的内存要大（一些可以统一设置的样式，被分别放入了各个选择器中，导致代码量大增）。

继承是不能带参数的，如果想要变化的量用混合。（因为继承会直接占据括号，里面放入一个混合）

继承的代码效率高，但是没有混合灵活；

 

继承的语法：(不能带括号和参数)

.混合名{

定义的统一属性

}

使用方式：

继承选择器:extend(.混合名){

里面包含它的子元素。

&:nth-child(1){}

&:nth-child(2){}

}

得到的结果是

.混合名,继承选择器 .混合名,继承选择器:nthchild(1),继承选择器:nth-child(2){

定义的统一属性

}

继承选择器:nthchild(1){

特有属性

}

继承选择器:nth-child(2){

特有属性

}

 

 

其实只需要：

混合名,继承选择器 .混合名{

定义的统一属性

}

继承选择器:nthchild(1){

特有属性

}

继承选择器:nth-child(2){

特有属性

}

可以将extend(.混合名)放入继承选择器中；其结构为

继承选择器{

&:extend(.混合名)；(使用这种方法，生成的时候显示除去，下面的子元素，然后生成继承选择器:extend(.混合名)这样再编译一次就能够达到上述效果了)

里面包含它的子元素。

&:nth-child(1){}

&:nth-child(2){}

}

 

当需要给下面添加:hover等伪元素时，如果使用直接的继承选择器:extend(.混合名)它是不会继承新加入的伪元素的，需要设置all。

.混合名{

 

}

下面不会被继承下来，只会继承上面

.混合名：hover{

 

}

 

继承方法：

继承选择器{

&:extend(.混合名 all)；(能够继承hover及其其他伪元素了)

里面包含它的子元素。

&:nth-child(1){}

&:nth-child(2){}

}

得到的结果：

混合名,继承选择器 .混合名{

定义的统一属性

}

混合名：hover,继承选择器 .混合名:hover{

定义的统一属性

}

继承选择器:nthchild(1){

特有属性

}

继承选择器:nth-child(2){

特有属性

}

 

less避免编译：

原生css计算方法cacl（）；如果在less中设置这个属性方法，就需要设置避免less将浏览器的工作给完成了。

只需要给属性加上~"cacl()"即可；这是浏览器去计算的。