Less基本使用

Less安装

npm install -g less

定义变量

@width: 10px
.header{
   width: @width
}

mixins

全局	带命名空间和访问符
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } .bgcpink{ background-color: pink; } .box{ width: 100px; height: 100px; margin: 0 auto; .bgcpink; .bordered }	#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... } } #header a { color: orange; #bundle.button(); }

嵌套& 表示当前选择器的父级

.clearfix {
  display: block;
  zoom: 1;
​
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

运算[calc() 特例]

@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
​
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

转义

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

映射，类似带下标的数组取值

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

作用域

1. 首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承

2. 混合（mixin）和变量的定义不必在引用之前事先定义

3. @var: red;
   #page {
     #header {
       color: @var; // white
     }
     @var: white;
   }导入

导入

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