less语言特性(翻译)

Posted 2020-10-16 Merrys

一、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;
}

View Code

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;
}

View Code

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;
}

View Code

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;
}

View Code

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;
}

View Code

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() { /* */ }
}

View Code

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

View Code

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

View Code

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;
}

View Code

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;
}

View Code

@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);
}

View Code

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;
}

View Code

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;
}

View Code

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;
}

View Code

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

View Code

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
}

View Code

 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()
}

View Code

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;
  }
}

View Code

变量作用域这一方面好复杂。。。

不定内容就不写上来了。

 二、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;
}

View Code

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

View Code