LESS是一种动态语言,属于CSS预处理语言的一种。LESS和其他预处理语言一样也支持嵌套的写法。下面就为大家通过小例子来介绍LESS中的嵌套书写方式。
嵌套语法
LESS代码
.meng { color: red;
.long { font:bold 12px/20px "宋体"; }
a { color:#000;
span {padding: 10px;}
i {width:10px;
em {
height : 90px;
}
}
}
}
编译后的CSS代码
.meng {
color: red;
}
.meng .long {
font: bold 12px/20px "宋体";
}
.meng a {
color: #000;
}
.meng a span {
padding: 10px;
}
.meng a i {
width: 10px;
}
.meng a i em {
height: 90px;
}
&的用法
& 符号的使用 — 如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。
LESS代码
.meng { color: red;
.long { font:bold 12px/20px "宋体"; }
a { color:#000;
&:hover {
text-decoration:none;
}
&:focus {
color:#999;
}
}
.menglong {background:red;
&:hover {
background:#777;
}
}
}
编译后的CSS代码
.meng {
color: red;
}
.meng .long {
font: bold 12px/20px "宋体";
}
.meng a {
color: #000;
}
.meng a:hover {
text-decoration: none;
}
.meng a:focus {
color: #999;
}
.meng .menglong {
background: red;
}
.meng .menglong:hover {
background: #777;
}
&的高级用法
用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。
LESS代码
.meng, .long {
div & {
color: black;
}
& + & {
color: red;
}
& ~ & {
color: red;
}
}
编译后的CSS代码
div .meng,
div .long {
color: black;
}
.meng + .meng,
.meng + .long,
.long + .meng,
.long + .long {
color: red;
}
.meng ~ .meng,
.meng ~ .long,
.long ~ .meng,
.long ~ .long {
color: red;
}
LESS详解之嵌套就为大家讲到这里了,更多有关LESS的小知识敬请关注梦龙小站有关LESS的更新。感谢大家一直以来对梦龙小站的关注。