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;}