LESS 预处理器

Tags
css
Created
Oct 19, 2015 4:01 AM

http://lesscss.org/features/#variables-feature-variable-interpolation

变量:

&代表所有父选择器,也可以直接用于字符串中
@_匹配任何值
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue;}
用在字符串、选择器、属性时使用{},如.@{my-selector} {}
可向变量名定义变量
当变量的值是{css规则}时,调用需要加(),且这样的变量可作为参数

扩展

nav ul {
  &:extend(.inline);
  background: blue;
}/*将nav ul选择器附加到.inline后面,扩展必须是最后一个伪类*/
:extend(.class all)扩展到所有能匹配.class中,没有all必须精确匹配才扩展

混合 .mixin { .a;}复制.a的属性,.a不能用HTML标签替代 .a(){} 表示.a自身并不输出属性,可以返回规则或变量 当()时直接量时可用做switch选择 通过when关键字来做有条件的混合,混合中用when可构成loop循环

嵌套,它现在不是模仿HTML 的结构.

#header {
     color: black;
          &::after { ... }
     }

.screencolor {     @media screen {         color: green;         @media (min-width: 768px) {             color: red;         }     } }

运算

+-*/

各种颜色函数、is类函数(用在when中)

属性合并

属性名加+表示混合进的属性会,逗号合并属性名加+_表示混合进的属性会 空格合并

转义

content: ~"^//* some horrible but needed css hack";

SuperMade with Super