less入门到进阶

最近在阅读Antd的源码，里面的样式主要使用的是less.js,我发现自己以前写的less确实太粗浅了，这里主要记录一些学习到的新知识。下面从最简单的讲起吧

入门

变量（Variables）

@width: 10px; 
@height: @width + 10px; 
#header { width: @width; height: @height; }

编译
#header { width: 10px; height: 20px; }

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

.bordered { border-top: dotted 1px black;  }
.post { color: red; .bordered(); }

编译
.post a { color: red; 
border-top: dotted 1px black;}

calc()

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));
// 结果是 calc(50% + (25vh - 20px))

转义（~）

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

@min768: ~"(min-width: 768px)";
.element { 
@media @min768 { 
font-size: 1.2rem; 
} 
}

编译为
@media (min-width: 768px) { 
.element { font-size: 1.2rem; } 
}

映射（Maps）

将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

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

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

导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

进阶