為什么會(huì)有嵌套
我們?cè)趯慍SS的時(shí)候脉幢，有時(shí)會(huì)遇到如下的情況：
可能有時(shí)未必是父子之間的嵌套劈彪，
.ivu-btn .ivu-icon可能有時(shí)子節(jié)點(diǎn)會(huì)很多齿诉，例如:
div .a {}
div .b{}
div .c{}
這樣子筝野，我們可以看出，粤剧。就寫了很多的div, 那么能不能只寫一次div歇竟，a,b,c放在內(nèi)部呢？在CSS中自然是不可以的抵恋，但是LESS是可以的焕议，該方法就是嵌套。支持多層嵌套弧关。
div {
.a{
.e{}
}
.b{}
.c{}
}
簡(jiǎn)介
它是一組 CSS 屬性盅安，允許將一個(gè)類的屬性用于另一個(gè)類，并且包含類名作為其屬性世囊。 在 LESS 中别瞭，可以使用類或 id 選擇器以與 CSS 樣式相同的方式聲明 mixin。 它可以存儲(chǔ)多個(gè)值株憾，并且可以在必要時(shí)在代碼中重復(fù)使用畜隶。
示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="./index.less" />
<script src="../../less.min.js" ></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="left">左側(cè)內(nèi)容</div>
<div class="right">右側(cè)內(nèi)容</div>
</div>
</div>
</body>
</html>
index.less
.container {
text-align: center;
.header {
font-weight: bolder;
.left {
float: left;
}
.right {
float: right;
}
}
}
有了嵌套，就可以很好的體現(xiàn)出html的一個(gè)結(jié)構(gòu)号胚，讓結(jié)構(gòu)更加清楚籽慢。但是需要注意的是，這個(gè)就像寫程序猫胁，如果嵌套層太多箱亿，也就不利于閱讀了。適當(dāng)使用~
