less @import and extend及mixin详解

在less中，通过

@import (keyword) "filename"
的方式引入其他的文件，这个keyword可以是以下6种：

• referrence

referrence这个keyword，例如: @import (reference) "file.less"将使得file.less文件中定义的所有mixin和class可以被使用，但是并不会把这些mixin/class编译到最终的css文件中

@import (reference) "styles";
.nav:extend(.nav all){};

 

将输出styles.less中定义的.nav class的所有相关selector/rule(包括嵌套部分），这样就可以取其所需，不需要的则不会被编译进来！

.nav {
list-style: none outside none;
padding: 0;
}
.nav li a {
text-decoration: none;
color: #000000;
width: 100%;
display: block;
padding: 10px 0 10px 10px;
border: 1px solid #004d00;
margin-top: -1px;
}
.nav li a:hover {
color: #ffffff;
background-color: #004d00;
}
.nav li.active a {
color: #000000;
background-color: #00b300;
}
.nav li:first-child a {
border-radius: 15px 15px 0 0;
}
.nav li:last-child a {
border-radius: 0 0 15px 15px;
}

 

这个reference关键字对于定制类似于bootstrap这样的前端框架为我所用也是非常有用的。 比如，你可能不需要bootstrap的其他臃肿的功能，你只希望用到bootstrap的几个button style，怎么办呢？最好的办法就是使用reference关键字来import BS的入口文件bootstrap.less，随后通过extend bootstrap定义的一些helper class或者一些mixin，来生成自己的定制semantic style集，这样做的另外一个好处是实现了所谓semantic 的css

@import (reference) "bootstrap.less";
.btn:extend(.btn){};
.btn-colored {
.button-variant(blue;red;green);
}

 

或者可以通过直接引用bootstrap定义好的预定义class，来这样定制一个semantic css

.btncolored {
.btn;
.btn-primary;
.btn-lg;
}

 

上述会将.btn, .btn-primary,.btn-lg都放进来，但是貌似有一些代码冗余。从这里可以看出对css属性的分类是非常重要的：layout属性，颜色属性（color,background-color,border-color），尺寸属性(font-size, line-height)

inline
inline关键字用于输入和less不兼容的code.虽然less接受标准的css，但是comments和一些hacks有时并不会被编译。使用inline关键字来输入一个css文件，原封不动地输出到编译结果中。

less
less关键字强制被输入的文件作为一个less文件并且被编译

@import (less) "styles.css" 这种情况下style.css将作为less被和普通less文件一样重新编译

css
css关键字强制@import和一个普通的css import一样工作。比如：

@import (css) "styles.css";
The output of the preceding code is as follows in the compiled output:
@import "styles.css";

once
默认情况下，less只会import一个文件一次（即使是你可能前后主动import了多次！）

multiple
有时，你可能希望import同一个文件多次，则使用multiple关键字

p {
color: red;
}
And your Less code is as follows:
@import (multiple) "style";
@import (multiple) "style";
The preceding code will output the following CSS code:
p {
color: red;
}
p {
color: red;
}

extend关键词

extend pseudo-class是一个less专有的pseudo-class，并且使用css pseudo-class一样的语法。该extend pseduo-class将把:extend前面的selector放到被extended的selector list中去，从而继承了被extended css selctor(class)的所有css属性。(adds the selector to the extended selector list).将selector增加到不同的class的selector list中去将使得这个selector拥有被extended class相同的属性。

.hyperlink{
color: blue;
&:hover {
color: red;
}
}
.other-hyperlink:extend(.hyperlink){};
将会编译输出（注意selector nested in .hyperlink并未被输出！！）：
.hyperlink,
.other-hyperlink {
color: blue;
}
.hyperlink:hover {
color: red;
}

 

.other-hyperlink:hover:extend(.hyperlink){};也可以使用
如果要将.hperlink中的nested rule也继承过来必须使用

.other-hyperlink:hover:extend(.hyperlink all){};

不带()的mixin实际上也就是一般的class，他们自然会在编译后的文件中输出出来，如果希望这个mixin(class)只作为在其他地方调用或者extend，而不会编译自己本身形成class的，那么最简单的方法是在class选择器后添加()即可。extend往往用于扩展重用一个静态的class,mixin则相当于函数的pattern，用于不同地方被重复使用

• Extended vs. Mixins in Less

http://transmission.vehikl.com/less-extend/

如果你使用过less,那么你一定用过mixin的强大功能来使得你的css更加dry(don't repeat yourself)，减少冗余，或许你可能有下面的标准button的style：

.btn { background: blue; color: white; }

 

你又希望在另外一个特定button中包含这些style，你可以使用mixins来简单地混合那个.btn class到另外一个class中，这样将允许您不用copy/paste就能重用那些style.

.round-button { .btn; border-radius: 4px; }

 

这么做看起来很ok，但是如果你仔细看一下编译后生成的css，你将发现有很多浪费空间的重复代码：

.btn { background: blue; color: white; } 
.round-button { background: blue; color: white; border-radius: 4px; }

 

有没有发现编译的结果就是将.btn类的style完全copy到round-button class中？

标准的css允许我们将selectors进行分组，所以如果我们重新清理一下代码你就会发现下面更好的css定义方式：

.btn, .round-button { background: blue; color: white; } 
.round-button { border-radius: 4px; } 

 

如果less必css本身要好，为什么它却傻到不会充分用好css的这个打包分组css style以便节省文件空间的功能呢？

这实际上是一个对LESS的合理的抱怨，这也是为什么很多人选择SASS而不用less的原因之一。但是好消息是从1.4开始，less就增加了extend功能，而这个extend功能就能有效地解决这个代码重复问题。

我们重写代码：

.btn { background: blue; color: white; } 
.round-button { 
&:extend(.btn); 
border-radius: 4px; 
}

 

编译以后我们就将获得下面干净的输出：

.btn, .round-button { background: blue; color: white; }
.round-button { border-radius: 4px; }

 

注意：默认情况下，nested selectors并不会被extended,比如：

.footer {
padding: 20px;
h2 { color: white; }
}
.feed { &:extend(.footer) }
上面这段代码编译后将会在.feed的输出中忽略h2

.footer, .feed { padding: 20px; }
.footer h2 { color: white; }
你可以通过增加一个all 关键字来强制compiler来包含所有nested selectors

.feed { &:extend(.footer all); }
编译之后就如下面内容：

.footer, .feed { padding: 20px; }
.footer h2, feed h2 { color: white; }
你也可以使用一个特定的nested selector:

.feed { &:extend(.footer h2); }
Media Queries:
extend关键字只会extend 在同一个media query中包含的selectors

@media (max-width: 1024px) {
.feed { padding: 20px; }
.sig { &:extend(.feed); }
}
所以上面的代码是可以工作的，但是下面的代码却不能work（由于.sig希望extend不在一个media query block中定义的clss)

.feed { padding: 20px; }
@media (max-width: 1024px) { .sig { &:extend(.feed); } }
既然extend就能实现如此完美的功能，我们为什么还要使用mixin呢？

Parametric Mixins

注意：当你只是希望在多个class中共享一些静态的style，那么extend是一个非常好的选择，但是minins在你需要增加一组动态的style时变得非常有用。Mixin是更高一级的抽象，类似于编程中的函数。

我们继续来看buttons，比如我们有以下起始的css style

.btn { 
background: #217a39; 
border: 1px solid #0f3c1c; 
border-radius: 4px; color: #fff; 
&:hover { 
    background: #3eb061; border-color: #165929; 
    }
}

这套css规则定义了一个小小的绿色button，并有一个非常酷的hover效果。

现在如果我们希望重用这个button,而同时又希望使用另外一个颜色，该怎么办呢？

extend在这种情况下确实无法真正帮助我们，而有参的mixins在这里就帮上大忙了：

.btn(@color) { 
background: @color; 
border: 1px solid darken(@color, 15); 
border-radius: 4px; 
color: #fff; 
&:hover { background: lighten(@color, 10); 
border-color: darken(@color, 5);
 } 
}

使用上面的mixin，我们就能够方便地定义一套不同的button：

.btn-success { .btn(#18682f); } 
.btn-alert { .btn(#9b6910); } 
.btn-error { .btn(#9b261a); }