Less-符號之逗號，空格，父級選擇器

Less符號

逗號

example:
.test() {
  box-shadow+: inset 0 0 10px #555;
}
.study {
  .test();
  box-shadow+: 0 0 20px black;
}

//output css
.study {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

屬性后跟“ + ”，就是“ , ”

 

空格

example:
.test() {
  transform+_: scale(2);
}
.study {
  .test();
  transform+_: rotate(15deg);
}

//output css
.study {
  transform: scale(2) rotate(15deg);
}

屬性后跟“ +_ ”，就是空格

 

“ & ”父級選擇器

example 1:
a {
  color: blue;
  &:hover {
    color: green;
  }
}

//output css
a {
  color: blue;
}
a:hover {
  color: green;
}

example 2:
.test{
    &-complete{
        background-color:red;
    }
    &-undone{
        background-color:blue;
    }
    &-normal{
        background-color:pink;
    }
}

//output css
.test-complete {
  background-color: red;
}
.test-undone {
  background-color: blue;
}
.test-normal {
  background-color: pink;
}

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

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ing {
    color: cyan;
  }
}

//output css
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link,
.linking {
  color: cyan;
}

 

example 4:（改變選擇器順序）
.test{
    .study{
        border:1px solid #ff6a00;
        .menus &{
            font-size:12px;
            color:#ff0000;
        }
    }
}

//output css
.test .study {
  border: 1px solid #ff6a00;
}
.menus .test .study {
  font-size: 12px;
  color: #ff0000;
}

example 5:(組合迸發)
ul,li,a{
    font-size:16px;
    & + &{
        margin-right:5px;
    }
}

//output css
ul,
li,
a {
  font-size: 16px;
}
ul + ul,
ul + li,
ul + a,
li + ul,
li + li,
li + a,
a + ul,
a + li,
a + a {
  margin-right: 5px;
}

組合迸發會將你選中的選擇器的所有可能組合全部選中並編譯輸出。

 

作者：leona

原文鏈接：http://www.cnblogs.com/leona-d/p/6322425.html

版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接