Less

Less

CSS的弊端

• CSS冗余度很高
• 不利于复用代码
• CSS没有很好的计算能力

Less(Leaner Style Sheets)

Less是一门CSS扩展语言，也称为CSS预处理器，在现有的CSS语法的基础上，加入程序式语言的特性。最大的特点就是引入了变量、函数等功能，用最少的代码做更多的事情。

1. Less变量

e.g. @color: pink;

​ body {

​ background-color: @color; }

2. Less编译

Easy LESS插件可以使保存的less文件自动生成css文件

3. Less嵌套

在css选择器中的子代选择器be like: .header logo{}， 但是在less中，子元素的样式需要嵌套在父元素的样式中书写。e.g. .header{logo {}}

4. Less实现伪类选择器

在Less中，有&符号，会被解析成父元素本身或者父元素的伪类

e.g. 在css中，a:hover {}; 在Less中，a{&hover{}}

5. Less算数运算

在Less中，任何数字、颜色或者变量都可以参与算数运算

[ 注：若两个不同单位的值进行算数运算， 运算结果取第一个值的单位。e.g. 10px + 5rem = 15px;

若只有一个值有单位，则运算结果取该单位。e.g. 10px + 5 = 15px]