Less

---

环境

• 在 Node.js 环境中使用

//安装
npm install -g less
//将less编译成css
lessc styles.less styles.css

• 在浏览器中使用

<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>

---

注释

• //这种注释，在编译后不会出现在CSS文件上
• /**/这种注释，编译后会出现在CSS文件上

---

变量

• 可以作为选择器，属性名，属性值，URL

@div: div;//选择器名
@width: width; //属性名
@p: p1; //选择器名
@height: 100px; //属性值
@imgUrl: "./img.png"; //URL

@{div}{
  @{width}: 200rem;
  height: @{height};
  background: url("@{imgUrl}");
}
#@{p}{
    color: #fff;
}

混合

.mixins(){
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}
h1{
  font-size: 36px;
  .mixins();
}
h2{
  font-size: 32px;
  .mixins();
}
//编译后
h1 {
  font-size: 36px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷体";
  border: 1px solid #ffffff;
  color: pink;
}