Less 基础 easyless 插件

12.3 less基础

12.3.1 css弊端

因为css没有很好的计算能力，比如将px换算成rem单位要手动换算，所以出现了less

12.3.2 less介绍

• less是一门css的扩展语言，也叫css预处理器，常见预处理器有Sass Less Stylus

• less中文网址：Less 中文网

12.3.3 less使用

less变量

@变量名：值；

• 必须有@前缀

• 不能包含特殊字符

• 不能以数字开头

• 大小写敏感，大小写不一样

// 定义一个粉色的变量
@color:pink;
// 定义一个字体为14px的变量
@font14:14px;
body {
    background-color: @color;
}
div {
    background-color: @color;
    font-size: @font14;
}

• less便于维护

12.3.4 less编译

• 需要将less编译成css文件才可以使用，使用Easy LESS插件

• 用这个插件写完less文件保存后就会自动生成一个相匹配的css文件