Less使用詳解（v3.9.0）—巢狀和父選擇器&

白夜追胸發表於2019-04-27
巢狀

該系列：

Less(v3.9.0)使用詳解——基本使用

Less(v3.9.0)使用詳解——變數

Less(v3.9.0)使用詳解——巢狀和父選擇器&

Less(v3.9.0)使用詳解——extend(巢狀)

其他待更新...

巢狀

當css選擇器存在父子關係時，可以像下面這樣書寫

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
複製程式碼

編譯為

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
複製程式碼

當遇到樣式表規則比如@media或@supports時，他會冒泡尋找規則

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}
複製程式碼

編譯成

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
複製程式碼

父選擇器

&表示父選擇器

a {
  color: blue;
  &:hover {
    color: green;
  }
}
複製程式碼

編譯為

a {
  color: blue;
}

a:hover {
  color: green;
}
複製程式碼

當去掉&會發現編譯為

...
a :hover {
  color: green;
}
複製程式碼

變成後代選擇器了，與我們實際想要的結果不符合

&能實現類似BEM這樣的命名規則

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}
複製程式碼

編譯為

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}
複製程式碼

&能多次使用，注意空格，

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}
複製程式碼

編譯為

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}
複製程式碼

注意&表示的所有的父選擇器，而不是最近的祖先節點

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}
複製程式碼

編譯為

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}
複製程式碼

由於&表示所有父節點，所以可以實現改變選擇器順序

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}
複製程式碼

編譯為

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}
複製程式碼

當父選擇器存在同組時，多個&使用成實現所有的分組的組合

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

編譯成16種（4*4）情況

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;
}
複製程式碼

相關文章