1、继承
与高级语言中的继承类似,就是在子代码块中可以继续沿用父代码块中的代码。
语法:
1、附着在选择器上使用。
.b{ color: red; }
.a:extend(.b) {
background: blue;
}
/* 等价于下面的代码 */
.a,.b{ color: red; }
.a{ background: blue; }
2、在样式集中使用
.a { &:extend(.b); }
.b { color: red; }
/* 等价于下面的代码 */
.b,.a{ color: red; }
all关键字:就是把继承父css的所有下属css样式。
.jicheng{
width: auto;
height: 50%;
text-align: center;
background: aqua;
}
.jicheng:hover{
background: red;
}
/*加入all*/
.footer:extend(.jicheng all){};
等价于
.jicheng,
.footer {
width: auto;
height: 50%;
text-align: center;
background: aqua;
}
.jicheng:hover,
.footer:hover {
background: red;
}
2、混合
.juzhong() {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
&:hover{
background-color: blue;
}
}
.textarea1 {
width:1000px;
height:500px;
font-size:20px;
.juzhong;
}
.textarea2 {
width:800px;
height:400px;
font-size:10px;
.juzhong;
}
等价于
.textarea1 {
width: 1000px;
height: 500px;
font-size: 20px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.textarea1:hover {
background-color: blue;
}
.textarea2 {
width: 800px;
height: 400px;
font-size: 10px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.textarea2:hover {
background-color: blue;
}
混合与继承的区别在于,混合可以带参数,而后面的括号虽然可以不加,但是最好加一下,因为加括号就不会输出在css里。
利用node将less文件转成css
前提将less库包安装好
lessc bootstrap.less bootstrap.css