丁鹿学堂：css预处理器之less学习（一）

less介绍

less是比较好用的css预处理语言。
less增加了很多好用的新特性。
常用的有变量，混入，嵌套，计算等
我们要注意的是，less不管是在服务器还是在浏览器中，都不能直接被使用，而是要编译成css才能运行。
less文件是以.less结尾的

less 编译的几种方式

1 vscode 插件 easy-less ，可以帮助我们自动去编译less为css
2 引入一个cdn的less编译代码，可以对less进行实时处理，这时候要把引入的less加一个type type=“text/less”
3通过npm安装less工具，试用less工具对less代码进行编译（在webpack中配置以后可以自动编译），这也是项目中最常用的方式。

less嵌套

如果box盒子是container的子类，在css中是这样写的

.container .box{
  height:100px
}
1
2
3

在less中可以直接嵌套写样式 ，& 表示所在选择器的名称。 下面的& 相当于.box, 常用于添加一些伪类使用。

.container{
  .box{
    height:100px
    &:hover{
    color:red
    }
  }
}
1
2
3
4
5
6
7
8

less变量

@colorRed:#dd143c;
.box{
  color:@colorRed
}

1
2
3
4
5

less的运算

less中支持使用运算

.box{
  height:100px *2
}
1
2
3