首页 > 其他 > 详细

less @import and extend

时间:2015-10-28 12:21:51      阅读:244      评论:0      收藏:0      [点我收藏+]

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

 

  • 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将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){};

less @import and extend

原文:http://www.cnblogs.com/kidsitcn/p/4916767.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!