子组合选择器和同层组合选择器:>、+和~:
Document 按钮 查链接 a:hover a:hover- 列表1
- 列表2
- 列表3
// 函数声明/混入 可以嵌套: @mixin border-radius { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } // 嵌套 @mixin h-ul { display: flex; justify-content: space-between; align-items: center;
li {
list-style: none;
}
}
// 参数 @mixin border(s, c) { border: w c; }
html { margin: 0; }
内容:
@import "./common.scss"; // 导入的语法
body { button { color: $error; @include border-radius; @include border(2px, solid, red); }
ul {
@include h-ul;
@include border($w: 2px, $s: dotted, $c: red);
}
div{
border: 1px solid red;
background-color: red
}
span{
@extend div;
font-size: 20px;
background-color: transparent;
}
}