Less學習筆記 -- Nested rules （嵌套規則）

Less嵌套規則模仿了HTML結構，這樣寫可以讓代碼更簡潔、更具層次感，上一小段代碼先了解下

Less代碼：

#header{
  color:black;
  .navigation{
    font-size:12px;
  }
  .logo{
    width:300px;
  }
}

CSS編譯代碼：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

使用這種方法也可以在混合中包含偽類，常見的用法就是css reset里面的清除浮動

Less代碼：

.clearfix{
  zoom:1;
  &:after{
    content:'';
    display:block;
    clear:both;
  }
}

CSS編譯代碼：

.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

其中，&運算符表示一個嵌套規則的父選擇器，常用于修改一個類或者定義偽類選擇器，比如：

Less代碼：

a{
  color:blue;
  &:visited{
    color:red;
  }
  &:hover{
    color:yellow
  }
}

CSS編譯代碼：

a {
  color: blue;
}
a:visited {
  color: red;
}
a:hover {
  color: #ffff00;
}

在上面清除浮動的代碼中，如果不加&，會是什么效果呢？

Less代碼：

.clearfix{
  zoom:1;
  :after{
    content:'';
    display:block;
    clear:both;
  }
}

CSS編譯代碼：

.clearfix {
  zoom: 1;
}
.clearfix :after {
  content: '';
  display: block;
  clear: both;
}

不難發現，這是一個典型的后代選擇器，并不是我們想要的效果

&選擇符的另一個非常重要的用途就是生產重復的類名，比如在寫CSS公共樣式的時候會有各種各樣的button樣式

Less代碼：（在這里復習下less中引入路徑的寫法）

@p_w_picpaths:'../p_w_picpaths';
.button{
  &-ok{
    background:url('../p_w_picpaths/1.jpg')
  }
  &-cancel{
    background:url('@{p_w_picpaths}/2.jpg')
  }
  &-custom{
    background:url('@{p_w_picpaths}/3.jpg')
  }
}

CSS編譯代碼：

.button-ok {
  background: url('../p_w_picpaths/1.jpg');
}
.button-cancel {
  background: url('../p_w_picpaths/2.jpg');
}
.button-custom {
  background: url('../p_w_picpaths/3.jpg');
}

&選擇符可以在選擇器中多次出現，反復引用父選擇器，而不是重復父選擇器的類名

Less代碼：

.link{
  &+&{
    color:red;
  }
  & &{
    color:purple;
  }
  &&{
    color:silver;
  }
  &, &ish{
    color:pink;
  }
}

CSS編譯代碼：

.link + .link {
  color: red;
}
.link .link {
  color: purple;
}
.link.link {
  color: silver;
}
.link,
.linkish {
  color: pink;
}

&選擇符表示所有的父選擇器，而不是特指最近的父選擇器

Less代碼：

.grand{
  .parent{
    &>&{
      color:red;
    }
    & &{
      color:green;
    }
    &&{
      color:blue;
    }
    &,&ish{
      color:black;
    }
  }
}

CSS編譯代碼：

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: black;
}

&選擇符還可以用于生成一個逗號分割列表的所有可能的選擇器排列

Less代碼：

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

CSS編譯代碼：

p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}