简介
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
(less css预处理器)
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。
中文官网： http://lesscss.cn/
less的编译
如何把less文件变成css文件
引入less.js文件（了解）
<!-- 必须指定rel的类型是stylesheet/less -->
<link rel="stylesheet/less" href="less/01.less">
<script src="less.js"></script>
注意：这种方式必须在http协议下运行，因为本质上less.js是通过ajax请求了less文件，进行编译。
缺点：
- 需要多引入一个less.js文件
- 需要多一次http请求，file协议打开无效
- 无法实时的看到编译的结果。
使用考拉(了解)
koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
使用步骤：
- 把
less文件夹拖进去 - 会在当前目录生成一个
css目录
win7上不好用,不知道为啥。
VScode 安装 Easy LESS 插件
安装之后的使用：
第一步：新增demo.less文件
第二步：用less语法编写
第三步：每次保存会自动生成demo.css文件
less语法
变量和注释
【less】
// 作用：定义一些变量，然后在用的地方引入即可
// 这种注释是less的，编译后css中没有
/* 这种注释css的，编译后css可以看到 */
@color: deeppink; // 1.定义变量
.box {
width: 100px;
height: 100px;
background: @color; // 2.使用变量
}
【css】
/* 这种注释css的，编译后css可以看到 */
.box {
width: 100px;
height: 100px;
background: deeppink;
}
混入
作用：可以把多个样式选择器整合,形成一个新的样式选择器
缺点：写了很多类，但是都编译到css文件中了
【less】
.btn {
width: 200px;
height: 50px;
background-color: #fff;
}
.btn_border {
border: 1px solid #ccc;
}
.btn_danger {
background-color: red;
}
//写法1
button {
.btn();
.btn_border();
.btn_danger();
}
//写法2 省略括号，这种写法更好理解，推荐这种
button {
.btn;
.btn_border;
.btn_danger;
}
【css】
.btn {
width: 200px;
height: 50px;
background-color: #fff;
}
.btn_border {
border: 1px solid #ccc;
}
.btn_danger {
background-color: red;
}
button {
width: 200px;
height: 50px;
background-color: #fff;
border: 1px solid #ccc;
background-color: red;
}
button {
width: 200px;
height: 50px;
background-color: #fff;
border: 1px solid #ccc;
background-color: red;
}
混入函数
和上面的混入类似，【但是混入函数不会都编译到css文件中】
【less】
//a.不带参数的混入函数
.pcss1() {
color: deepskyblue;
}
//b.带参数的混入函数，定义了参数，调用的时候必须传入参数，否则会报错
.pcss2(@bordercolor) {
border: 1px solid @bordercolor;
}
//c.带参数的函数的默认值
.pcss3(@height: 60px) {
height: @height;
}
p {
.pcss1();
.pcss2(red);
.pcss3();
//.pcss3(100px);
}
【css】
p {
color: deepskyblue;
border: 1px solid red;
height: 60px;
}
嵌套和&号
可以层级写样式,增加代码可读性
使用伪类的时候 可以使用
&表示自己
【less】
ul {
list-style: none;
li {
float: left;
width: 100px;
height: 100px;
a {
color: deeppink;
&:hover {//`&` 表示自己,也就是a标签
color: green;
}
}
}
}
【css】
ul {
list-style: none;
}
ul li {
float: left;
width: 100px;
height: 100px;
}
ul li a {
color: deeppink;
}
ul li a:hover {
color: green;
}
模块化
模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。
注意：导入的时候不需要加上.less后缀
【a.less】
.box1 {
width: 100px;
height: 100px;
background: deeppink;
}
【b.less】
.box2 {
width: 100px;
height: 100px;
background: deeppink;
}
【ab.less】
@import './a.less';
@import './b.less';
【ab.css】
.box1 {
width: 100px;
height: 100px;
background: deeppink;
}
.box2 {
width: 100px;
height: 100px;
background: deeppink;
}
运算
【less】
h1 {
height: 120+2px;
height: 120-2px;
height: 120*2px;
//height: 120/2px;//除法不好使
}
【css】
h1 {
height: 122px;
height: 118px;
height: 240px;
}
函数
在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。