丁鹿学堂：前端开发之css预处理器less学习总结（一）less介绍 less是比较好用的css预处理语言。 less增

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

1 vscode 插件 easy-less ，可以帮助我们自动去编译less为css

2 引入一个cdn的less编译代码，可以对less进行实时处理，这时候要把引入的less加一个type type="text/less"

3通过npm安装less工具，试用less工具对less代码进行编译（在webpack中配置以后可以自动编译），这也是项目中最常用的方式。

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

.container .box{
  height:100px
}

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

.container{
  .box{
    height:100px
    &:hover{
    color:red
    }
  }
}

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

less中支持使用运算

.box{
  height:100px *2
}