less 基础用法和技巧

写在前： less是css 预编译， 记录less 基本用法；w3c详情地址   中文文档地址

---

less 嵌套规则：

.container {
  h1 {
     font-size: 22px;
     color: #fff;
  }
  
  p {
      font-size: 15px;
      color: pink;
  } 

}

编译后：

.container h1 {
  font-size: 22px;
  color: #fff;
}

.container p {
  font-size: 15px;
  color: pink;
}

---

less 操作： less 支持一些算数运算 （+） （-） （*） （/）

例子：

@fontSize: 10px;

.app {
  font-size: @fontSize * 2;
  color: green;
}

编译后：

.app {
  font-size: 20px;
  color: green;
}

---

less变量：

less 使用 @ 符号定义变量。

@text-color: pink;

//使用变量

.header {
  font-size: 14px;
  color: @text-color;
}


//编辑结果

.header {
  font-size: 14px;
  color: pink;
}

---

less 混合：

.p1 {
  margin-top: 16px;
  margin-bottom: 10px;
}

.p2 {
  font-size: 15px;
  color: #ccc;
  .p1();
}

.p3 {
  font-size: 18px;
  .p1;
}


// 编译后

.p1 {
  margin-top: 16px;
  margin-bottom: 10px;
}

.p2 {
  font-size: 15px;
  color: #ccc;
  margin-top: 16px;
  margin-bottom: 10px;
}

.p3 {
  font-size: 18px;
  margin-top: 16px;
  margin-bottom: 10px;
}

---

命名空间：

.p1 {
  font-size: 14px;
  color: #fff;
  width: 100px;
  height: 100px;
  .content {
    font-size: 16px;
    color: #ccc;
  }
}

// 命名空间使用

.p2 {
  .p1>.content;
  font-size: 16px;
  color: pink;
}

---

映射：

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}


//输出预期

.button {
  color: blue;
  border: 1px solid green;
}