在less中,通过
@import (keyword) "filename"
的方式引入其他的文件,这个keyword可以是以下6种:
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; }
inline关键字用于输入和less不兼容的code.虽然less接受标准的css,但是comments和一些hacks有时并不会被编译。使用inline关键字来输入一个css文件,原封不动地输出到编译结果中。
less关键字强制被输入的文件作为一个less文件并且被编译
@import (less) "styles.css" 这种情况下style.css将作为less被和普通less文件一样重新编译
css关键字强制@import和一个普通的css import一样工作。比如:
@import (css) "styles.css";
The output of the preceding code is as follows in the compiled output:
@import "styles.css";
默认情况下,less只会import一个文件一次(即使是你可能前后主动import了多次!)
有时,你可能希望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将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){};
原文:http://www.cnblogs.com/kidsitcn/p/4916767.html