less 函数_Less快速入门、解决css的历史问题

Less是CSS的预编译语言，可以让编写CSS的过程更加简单、高效、快捷，让一沉不变的CSS充满活力和生机。

需要将编写后的less文件编译成传统CSS文件才能供html使用

传统CSS开发在大型项目中是非常痛苦的一件事，开发和维护都是一件非常让人头疼的是，Less的出现彻底解决了CSS中的“历史遗留”难题。

---

问题： 多次出现的相同属性

在直接编写CSS过程中经常会出现相同属性的，比如

#test1 {    color: #fff;}#test2 {    color: #fff;}

整个项目中可能会出现N个相同的color，维护起来非常麻烦。 Less使用“变量”解决了这个问题！

变量(只能定义一次)

多次出现的相同属性用一个变量多次引用

@white: #fff; // 使用@定义一个变量#test1 {    color: @white; // 引用变量}#test2 {    color: @white; // 引用变量}

便实现了上方问题CSS代码中属性的可复用性，只需要改动几个变量即可让全局样式随之改变。 还能使用一些简单的运算符，让任何数字，甚至颜色都可以进行运算：

@length: 5px + 5; // 这样变量就被赋值为 10px@doubleLength: @length * 2; // 变量 * 2@addLength: @length + @doubleLength; // 变量之间相加  #test {    color: #888 / 4; // 颜色运算    height: (@length + 5) * 2; // 使用括号进行优先级运算    border: (@length + 1) solid red; // 使用在多参数属性中}

---

问题：多次出现的一组属性

当然，有些时候重复出现的不只color一个属性，比如

#mix {    border: 1px solid red;    float: left;    margin: 10px;    padding: 20px;}#test1 {    color: red;    border: 1px solid red;    float: left;    margin: 10px;    padding: 20px;}#test2 {    color: blue;    border: 1px solid red;    float: left;    margin: 10px;    padding: 20px;}

几组属性大部分都是相同的。这就需要使用Less的 混合 用法了

混合(maxin)

将css进行复用的方法：

#mix {    border: 1px solid red;    float: left;    margin: 10px;    padding: 20px;}#test1 {    color: red;    #mix; // 引用#mix的全部属性集}#test2 {    color: blue;    #mix; // 引用#mix的全部属性集}

这样就可以让#mix的属性全部在#test1、#test2中出现，编译后就是上方问题中的css结果。

任何class、id都可以用这种方式进行引入

“混合”还可以写成函数的形式，附带形参(可传递多个参数)：

#mix (@marginSize) {    border: 1px solid red;    float: left;    margin: @marginSize;    padding: 20px;}#test1 {    color: red;    #mix(10px); // 传入变量，编译后对应的那条属性为margin: 10px;}#test2 {    color: blue;    #mix(20px); // 传入变量，编译后对应的那条属性为margin: 20px;}

也可以为函数形参设定默认值：

// 注意这里的默认值要用 ： 而不是 = #mix (@marginSize: 50px) {    border: 1px solid red;    float: left;    margin: @marginSize;    padding: 20px;}#test1 {    color: red;    #mix; // 未传入变量，则使用参数默认值，margin的值就是50px;}

我们可能会发现，上面几个“混合”的例子编译后都是含有#mix这个属性的，有些时候我们可能只是为了复用而创建的属性集，并不想让它出现在编译后的css中，我们可以使用如下的方法：

.mix (){ // 注意这里的空括号    border: 1px solid red;    float: left;    padding: 20px;}#test1 {    color: red;    .mix; // 引用混合属性集}

这样的话在编译结果中就只有#test1 这一个了，.mix会被Less隐藏掉了。 这就很像标准的函数的使用方法了。

---

问题：多层级问题

因为Dom的层级关系，让CSS经常会出现多层级下的元素属性定义：

#header h1{    color: red;}#header div{    border: 1px solid blue;}#header div p {    padding: 10px;}#header div p a{    color: green;}#header div p a:hover{    background: yellow;}

这样的结构看起来不是很清晰，书写起来的重复代码量会很大，中间一级出错则会导致下级出错，针对这样的弊端，Less给出一个很好的解决办法。

嵌套

直接上Less代码

#header{    h1 {        color: red;    }        div {        border: 1px solid blue;        p {            padding: 10px;            a {                color: green;                &:hover {                    background: yellow;                }           }       }    }}

这个特性极大减少了在编写过程中的代码冗余，父级元素依次包含子孙元素，让结构更加清晰，层级关系一目了然。 当然，Less这里的嵌套也只是层级关系的嵌套，在这里并不会有子层继承父层属性的情况发生。

---

html引入Less方法

因为less是一种css的预编译语言，.less文件不能直接在Html中直接使用，需要进行编译成css才能在html中引用。

1. 开发阶段可以引用 less.js (https://cdn.bootcss.com/less.js/3.0.0-pre.4/less.js)的方式通过客户端进行解析less文件，节省编译步骤，直接使用。

...

2. 生产阶段则推荐先将less编译，或使用webpack、grunt等集成工具，打包集成！