web11.less

less是什么？

​ 是一门向后兼容的 CSS 扩展语言。包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

变量（Variables）

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合（Mixins）

​ 将一组属性从一个规则集包含（或混入）到另一个规则集的方法(定义一个基类，将这个类放到另一个类里面)

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

嵌套（Nesting）

可以将伪选择器与混合一同使用，(& 表示当前选择器的父级）

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套

同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）

运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。

如果单位换算无效或失去意义，无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

乘法和除法不作转换

/ 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

calc() 特例

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

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

转义（Escaping）

任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation

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

函数（Functions）

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

命名空间和访问符

它用于将mixins分组在通用名称下。 使用命名空间可以避免名称冲突，并从外部封装mixin组。

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

映射（Maps）

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

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

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

作用域（Scope）

与CSS中的作用域非常类似，首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

注释（Comments）