less用法，让css更加简便

什么是lessLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 能够运行在 Node 或浏览器端。如何引入less使用less有如下三种方式直接引入 Less.js使用CDN在线引入在命令行 使用npm安装npm install less -g3.为何使用less(less优点) 1.变量 2.混合嵌套 3.方法 4.父子元素 5.import4.如何使用less 1.建立html页面,在页面内引入mian.css

2.建立less页面,并编写less代码

3.运行指令lessc main.less > main.css,生成对应的css文件 在命令控制行中经过运行指令lessc main.less > main.css,生成对应的css文件 能够经过指令lessc main.less来预先查看编译后的css代码样式生辰八字起名字

5.变量 经过@变量名的方式来进行变量的定义(@等同于var),以后经过调用变量名来进行赋值,这样能够极大的重复代码,对于性能优化也有很好的提高6.混合嵌套 在编写部分css代码时,可能会出现相同属性屡次使用的状况

在上面的两个样式中都使用了border这个属性,而且内容彻底相同；在传统 CSS 写法中只能这样一遍又一遍的去书写重复的内容，在 Less 中经过将公共属性抽取出来做为一个公共类的方式规避这一点。

总结

混合也是减小代码书写量的一个方法；

混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；

混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是同样的效果，看我的习惯，如：第三行和第八行转译成 css 是同样的。

7.Function

在less中,咱们能够经过编写一个css类的方法,将值经过参数的形式进行传参,而后只调用方法和实参,就能够完成css的设置

语法

.方法名(形参){定义css属性}

.background(@color){background: @color;}