一、Mixin
Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.
Mixins是一种将（一组样式规则）添加到（另一组样式规则中）的方法。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; }
Notice that when you call the mixin, the parentheses are optional.
当你使用一个Mixin的时候，（括号）是可选的。
If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
你创建了一个Mixin但是不想这个Mixin输出，那就在创建的时候在该Mixin后加上()。
.my-mixin { color: black; } .my-other-mixin() { background: white; } .class { .my-mixin; .my-other-mixin; }
Mixins can contain more than just properties, they can contain selectors too.
Mixins 里面不仅可以包含样式，还可以嵌套（选择器）。
.my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin; }
If you want to mixin properties inside a more complicated selector, you can stack up multiple id's or classes.
如果你想使用一个有复杂选择器嵌套的Mixin中的属性，可以直接使用id或class连续定位到相应位置。
#outer { .inner { color: red; } } .c { #outer > .inner; } Output: .c { color: red; }
One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won't conflict with another library.
最外层使用有id嵌套的Mixin可以形成一个新的命名空间以防止和别的样式库产生样式冲突。
#my-library { .my-mixin() { color: black; } } // which can be used like this .class { #my-library > .my-mixin; }
If namespace have a guard, mixins defined by it are used only if guard condition returns true.
如果Mixin有guard(使用条件)，遵循guard规则，只有当gurd为true才编译。
#namespace when (@mode=huge) { .mixin() { /* */ } }
if you want to match mixins based on value type, you can use the is functions:
Here are the basic type checking functions:
iscolor
isnumber
isstring
iskeyword
isurl
If you want to check if a value is in a specific unit in addition to being a number, you may use one of:
ispixel
ispercentage
isem
isunit
.mixin (@a; @b: 0) when (isnumber(@b)) { ... } .mixin (@a; @b: black) when (iscolor(@b)) { ... }
Use the !important keyword after mixin call to mark all properties inherited by it as !important:
当使用mixin时后有 !important，则所有Mixin里的样式都会继承!important。
.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; } .unimportant { .foo(); } .important { .foo() !important; }
Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.
像是方法中添加arguments一样，Mixin里也可以添加arguments传递给MIxin属性内部使用。
Parametric mixins can also have default values for their parameters or Multiple parameters.
也可以设置一个默认值；或是在使用的时候重新赋值覆盖默认值。等等（-_-）。
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don't want to deal with individual parameters:
@arguments在Mixin中是一个关键词，包含了所有Mixin中设置过的属性。
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .big-block { .box-shadow(2px; 5px); }
You can use ... if you want your mixin to take a variable number of arguments.
可以使用 ... 来表示有多个变量。关键词@rest和javascript中的 rest 意义相似，表示除之前以声明的变量以外的所有变量。
.mixin(...) { // matches 0-N arguments .mixin() { // matches exactly 0 arguments .mixin(@a: 1) { // matches 0-1 arguments .mixin(@a: 1; ...) { // matches 0-N arguments .mixin(@a; ...) { // matches 1-N arguments .mixin(@a; @rest...) { // @rest is bound to arguments after @a // @arguments is bound to all arguments }
Sometimes, you may want to change the behavior of a mixin, based on the parameters you pass to it. Let's start with something basic:
有时候你想要通过参数改变Mixin的功能，可以：
.mixin(dark; @color) { color: darken(@color, 10%); } .mixin(light; @color) { color: lighten(@color, 10%); } .mixin(@_; @color) { display: block; } if we run: @switch: light; .class { .mixin(@switch; #888); } Output: .class { color: #a2a2a2; display: block; }
Only mixin definitions which matched were used. Variables match and bind to any value. Anything other than a variable matches only with a value equal to itself.
使用时，只有与Mixin中定义变量对应的才会被应用。
.mixin(@color) { color-1: @color; } .mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); } Output: .some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; }
Variables and mixins defined in a mixin are visible and can be used in caller's scope. Thus variables defined in a mixin can act as its return values.
在Mixin中定义的变量的作用域：调用者的作用域。也可以通过变量创造新的方法返回新的值。
.mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; }
.average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value }
Variables defined directly in callers scope cannot be overridden. However, variables defined in callers parent scope is not protected and will be overridden。
直接定义在Mixin外部的全局变量会被定义在Mixin内部的局部变量重写，跟javascript变量的作用域相似。但是定义在caller内部的变量会被忽视。
@variable: global; @detached-ruleset: { // will use global variable, because it is accessible // from detached-ruleset definition variable: @variable; }; selector { @detached-ruleset(); @variable: value; // variable defined in caller - will be ignored }
mixin defined in mixin acts as return value too:
.unlock(@value) { // outer mixin .doSomething() { // nested mixin declaration: @value; } } #namespace { .unlock(5); // return .doSomething() .doSomething(); //use .doSomething() }
A detached ruleset is a group of css properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.
ruleset 是样式，选择器嵌套，media声明等存储在变量中的集合。你可以直接使用这个集合也可以把它当作Mixin中的变量使用。此时必须在使用的时候加()
@my-ruleset: { .my-selector { @media tv { background-color: black; } } }; @media (orientation:portrait) { @my-ruleset(); } Output: @media (orientation: portrait) and tv { .my-selector { background-color: black; } }
变量作用域这一方面好复杂。。。
不定内容就不写上来了。
二、Merge
The merge feature allows for aggregating values from multiple properties into a comma or space separated list under a single property. merge is useful for properties such as background and transform.
Merge特性允许将多个属性以逗号或是空格的形式写在单个属性下。像是background和transform等复合属性。
.mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; }
.mixin() { transform+_: scale(2); } .myclass { .mixin(); transform+_: rotate(15deg); }
三、extend
Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.
Extend 是一个伪类，可以将选择器应用到匹配的另一个选择器上。
.a:extend(.b) {} .e:extend(.f, .g) {} pre:hover:extend(div pre){} .some-class:extend(.bucket tr) {} .replacement:extend(.test all) {} .bucket { color: blue; } @{variable}:extend(.bucket) {} @variable: .selector;
四、default
Available only inside guard conditions and returns true only if no other mixin matches, false otherwise.
如果没有其他Mixin匹配 guard 条件，则default返回true;
.mixin(1) {x: 11} .mixin(2) {y: 22} .mixin(@x) when (default()) {z: @x} div { .mixin(3); } div.special { .mixin(1); }
.mixin(@value) when (ispixel(@value)) {width: @value} .mixin(@value) when not(default()) {padding: (@value / 5)} div-1 { .mixin(100px); } div-2 { /* ... */ .mixin(100%); }
五、数学函数
（1）ceil
Rounds up to the next highest integer.
向上取整。
ceil(2.4) //3
（2）floor
Rounds down to the next lowest integer.
向下取整。
floor(2.6) //2
（3）persentage
Converts a floating point number into a percentage string.
将浮点数转换为百分比字符串。
percentage(0.5) //50%
（4）round
Applies rounding.
四舍五入。
round(1.67, 1) //1.7
round(1.67) //2
（5）min
Returns the lowest of one or more values.
取最小值
min(3px, 42px, 1px, 16px);
（6）max
Returns the highest of one or more values.
取最大值
max(3%, 42%, 1%, 16%);
六、颜色操作函数
（1）lighten
Increase the lightness of a color in the HSL color space by an absolute amount.
提高亮度。
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
（2）darken
Decrease the lightness of a color in the HSL color space by an absolute amount.
降低亮度。
@brand-primary: darken(#428bca, 6.5%); // #337ab7
（3）fadein
Decrease the transparency (or increase the opacity) of a color, making it more opaque.
降低透明度。
@popover-border-color: rgba(0,0,0,.2);
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
（4）fadeout
Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.
增加透明度。
（5）fade
Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.
添加透明度属性。
fade(hsl(90, 90%, 50%), 10%)
output:
rgba(128, 242, 13, 0.1)