因为 Less 和 CSS 非常像,因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。
一、安装
在Node.js环境中使用Less:
//安装:
npm install -g less
> lessc styles.less styles.css
在浏览器环境中使用 Less :
//在浏览器环境中使用 Less :
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
cmd中:
npm i less less-loader -D //css预处理语言
二、 功能
1、变量
<style lang="less">
// 01 定义变量
@gray:#999;
@size:20px;
.plusAction a{
color:@gray;
font-size:-10px+@size;
}
</style>
2、混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下ÿ