Sass

75 阅读1分钟

子组合选择器和同层组合选择器:>、+和~:

Document 按钮 查链接 a:hover a:hover
  • 列表1
  • 列表2
  • 列表3
# 嵌套和参数: $info: blue; $error: pink;

// 函数声明/混入 可以嵌套: @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(w,w, s, c) { border: w ss 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;
}

}