less

Variables

@c1: #000000;
@c2: @c1 + #255;

//selectors
@sel1: app;

#@{sel1} {
  background: @c1;
}

//urls
@img: '../img';

body {
  background: url('@{img}/p.png');
}

//import
@themes-red: './themes/red.less';

@import '@{themes-red}';

//properties
@pro1: color;

.widget {
    @{pro1}: @c1;
}

//variable names
@world: 'hello world.';
@var: 'world';

body::before {
  content: @@var;
}

//lazy loading
//变量懒加载，不用再使用前声明，变量定义多次，以最后一次定义的值为准
.lazy-width {
  width: @width;
}

@width: 9%;

//default variables
@c3: green;

//因为懒加载red.less中定义的c3会覆盖当前
@import './themes/red.less';
body {
  background: @c3;
}

//themes/red.less
@c3: red;

body {
  background: @c3;
}

Extend

.inline {
  display: inline;
}

.blue {
  color: blue;
}

nav ul {
  &:extend(.inline);
  color: red;
}

nav ul:extend(.blue) {
  background: black;
}

//extend syntax
.a {
  color: red;
}

ul.a {
  font-size: 12px;
}

//生成.a,.b和ul.a, ul.b
.b:extend(.a all) {
  font-weight: bold;
}

//只生成.a,.c
.c:extend(.a) {
  font-weight: lighter;
}

//继承多个
.d:extend(.b,.c) {
}

//extend attached to selector
div {
  color: red;

  pre {
    color: blue;
  }
}

//继承选择器内容
a:hover:extend(div) {
}

//extend inside ruleset
//&:extend(selector)
a:hover {
  &:extend(div pre);
}

//extending nested selectors
.red {
  tr & {
    color: red;
  }
}

a:extend(tr .red) {
  background: red;
}

//exact matching with extend
*.blue, a.blue, .a.blue, .blue > .a {
  color: blue;
}

//不匹配*.blue, a.blue, .a.blue, .blue > .a
.b:extend(.blue) {
}

link:hover:visited {
  color: blue;
}

//匹配，顺序无关
.selector:extend(link:visited:hover) {
}

//nth expression
:nth-child(1n+3) {
  color: green;
}

//不匹配
.child:extend(:nth-child(n+3)) {
}

[title=identifier] {
  color: green;
}

//匹配
.child:extend([title=identifier]) {
}

//extend all
*.pink {
  color: pink;
}

//all关键字匹配所有包含选择器的项
a:extend(.pink all) {
}

//selector interpolation with extend
//不能匹配选择器为变量，会无视他
.pink {
  color: pink;
}

@selector: .selector;
//但是extend接在插值选择器后可匹配
@{selector}:extend(.pink) {
}

//scoping / extend inside @media
.selector {
  color: yellow;
}

@media print {
  .selector {
    color: pink;
  }

  //会匹配@media内部的selector
  a:extend(.selector) {
  }
}

//duplication detection
.e, .f {
  color: yellow;
}

//输出.e, .f, .g, .g 不会去重复
.g:extend(.e, .f) {
}

//use cases for extend
//classic use case
.animal {
  color: white;
}

//使用时只需引入bear
.bear {
  &:extend(.animal);
  font-weight: bold;
}

//reducing css size
//代替mixins，mixins会拷贝全部属性，extend能节约代码
.inline {
  display: inline;
}

.thing1 {
  &:extend(.inline);
}

.thing2 {
  &:extend(.inline);
}

//combining styles / a more advanced mixin
//比mixins更灵活复用性更高，如2个结构不同blocks但需要提供同样的style
li.list > a {
  color: pink;
}

button {
  &:extend(li.list > a);
}

Mixins

.a, #b {
  color: red;
}

.mixin1 {
  .a();
}

.mixin2 {
  #b();
}

//not outputting the mixin
.mixin3() {
  color: black;
}

body {
  .mixin3;
}

//selectors in mixins
.hover-mixin() {
  &:hover {
    color: pink;
  }
}

a {
  .hover-mixin();
}

//namespaces
#my {
  .mixin() {
    color: red;
  }
}

.my {
  .mixin() {
    color: blue;
  }
}

a {
  #my > .mixin();
}

a {
  .my > .mixin();
}

//guarded namespaces
/*#namespace when (@mode=huge) {
  .mixin() {
    color: pink;
  }
}*/

//thie !important keyword
.foo() {
  color: red;
  font-size: 12px;
}

.important {
  //mixins上执行!important会给mixins所有属性加上!important
  .foo() !important;
}

Parametric Mixins

.font-size(@size:14px) {
  font-size: @size;
}

body {
  .font-size(12px);
}

//mixins with multiple parameters
.mixin(@color) {
  color-1: @color;
}

.mixin(@color; @padding:10px) {
  color-2: @color;
  padding-2: @padding;
}

body {
  //匹配一个参数的mixin和两个参数的mixin(@padding设置默认值)
  .mixin(blue);
}

body {
  //仅匹配两个参数的mixin
  .mixin(red; 15px);
}

//named parameters
.mixin2(@color:black; @padding) {
  color: @color;
  padding: @padding;
}

body {
  //使用命名参数传值，避免指定第一个常数
  .mixin2(@padding:5px);
}

//the @arguments variable
.mixin-box-shadow(@x:0; @y:0;@blur:1px;@color:#000) {
  //@argumets一次传入全部参
  box-shadow: @arguments;
}

body {
  .mixin-box-shadow(2px; 5px);
}

//advanced arguments and the @rest variable
//mixin传入rest风格参数
.mixin-padding(...) {
  padding: @arguments;
}

body {
  .mixin-padding(0);
}

body {
  .mixin-padding(1px 2px 3px 4px);
}

//pattern-matching
.mixin3(@a) {
  color: @a;
}

.mixin3(@a; @b) {
  color: fade(@a, @b);
}

//同名mixin依据参数个数匹配
body {
  .mixin3(red);
}

body {
  .mixin3(red; green);
}

Mixins as Functions

//定义在mixin中的变量和子mixin可以在当前调用上下文中使用
.mixin(@x; @y) {
  @average: ((@x+@y)/2);
}

body {
  .mixin(10px, 50px);
  padding: @average;
}

.unlock(@value) {
  .doSomething() {
    declaration: @value;
  }
}

body {
  .unlock(5);
  .doSomething();
}

Passing Rulesets to Mixins

/*@rulesets: { background: red; color: white; font-size: 12px; }

body {
  @rulesets();
}*/

.mixin-rulesets(@rules) {
  div {
    @rules();
  }
}

body {
  .mixin-rulesets({ background: red; color: white; font-size: 12px; })
}

Import Directives

//引入less文件，会输出到当前css
@import './themes/red.less';
//同上
@import './themes/red';
//引入css文件，不会输出到当前css
@import './themes/red.css';

//import options
//只会导入extend和mixin的部分
@import (reference) './themes/red';
body:extend(body) {
  .mixin();
}

//内联方式引入css，会输出到当前css
@import (inline) './themes/red.css';
//less方式引入css，会输出到当前css
@import (less) './themes/red.css';
//css方式引入less，不会输出到当前css
@import (css) './themes/red.less';
//忽略多次引入的同名less文件(@import的默认行为)
@import (once) './themes/red';
//允许多次引入同名less文件
@import (multiple) './themes/red';
//只当文件存在时才引入
@import (optional) './themes/blue';

Mixin Guards

//Guards对条件表达式匹配非常有用
.mixin(@fontSize) when (@fontSize >= 16px) {
  color: red;
}

.mixin(@fontSize) when (@fontSize < 16px) {
  color: black;
}

body {
  .mixin(18px);
}

body {
  .mixin(14px);
}

//guard comparison operators
//> >= < <= = true
.truth(@v) when (@v = true) {
  color: green;
}

body {
  .truth(true);
}

//guard logical operators
//且条件and
.mixin2(@a) when (isnumber(@a)) and (@a > 0) {
  color: pink;
}

body {
  .mixin2(1);
}

//或条件,
.mixin2(@a) when (@a < 0), (@a > 0) {
  color: yellow;
}

body {
  .mixin2(-1)
}

//非条件not
.mixin2(@a) when not (@a < 0) {
  color: #F6A100;
}

body {
  .mixin2(0);
}

//type checking functions
//is方法，提供基于数据类型匹配mixin
.mixin3(@a) when (iscolor(@a)) {
  color: @a;
}

body {
  .mixin3(#02df20);
}

//conditional mixins
//default关键字创建默认匹配
.mixin4(@a) when (@a > 0) {
  color: olivedrab;
}

//匹配@a>0以外的其他情况
.mixin4(@a) when (default()) {
  color: darkmagenta;
}

body {
  .mixin4(red);
}

CSS Guards

@show: true;

button when (@show = true) {
  color: red;

  & when (@show = true) {
    background: pink;
  }
}

Loops

.loop(@counter) when (@counter > 0) {
  width: (10px * @counter);
  .loop((@counter -1));
}

div {
  .loop(5);
}

Merge

//comma
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}

body {
  .mixin();
  //在css属性后跟+，用, 连起属性
  //box-shadow: inset 0 0 10px #555, 0 0 20px black;
  box-shadow+: 0 0 20px black;
}

//space
.mixin2() {
  transform+_: scale(2);
}

body {
  .mixin2();
  //在css属性后跟+_，用空格连起属性
  //transform: scale(2) rotate(15deg);
  transform+_: rotate(15deg);
}

Parent Selectors

a {
  &:hover {
    color: red;
  }
}

.button {
  &-ok {
    background: green;
  }
}

//multiple &
.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

//changing selector order
.header {
  //.menu .header { border-radius: 5px; }
  .menu & {
    border-radius: 5px;
  }
}

//combinatorial explosion
//p + p, p + a, a + p, a + a { font-size: 12px; }
p, a {
  & + & {
    font-size: 12px;
  }
}