首页 > 代码库 > less-符号之逗号，空格，父级选择器

less-符号之逗号，空格，父级选择器

2024-09-01 18:41:47   218人阅读

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


版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
less-符号之逗号，空格，父级选择器






























        

            
                
                  
                
                

                    联系

                    我们