标签：页面 属性 链接 example font log one 博客 amp
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
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
标签：页面 属性 链接 example font log one 博客 amp
原文地址：http://www.cnblogs.com/leona-d/p/6322425.html
