web0715/scss/index.scss

// @import './reset.scss';
@import url(reset.css);
$a: plum;
$cc: red !important;
$dd: yellow !default;
$box1: 2px solid #f00;
@mixin vase {
    width: 500px;
    height: 500px;
    color: $cc;
    background: $dd;
}
@mixin a1($size) {
    font-size: $size;
    background: lightblue;
}
@mixin a2($radius: 50%, $color: $dd) {
    border-radius: $radius;
    box-shadow: 10px 10px 5px $color;
}
// @mixin a2($radius:50%,$color:$dd) {
//     border-radius: $radius;
//     box-shadow: 10px 10px 5px $color;
// }
// @mixin a3($a,$b,$c,$d) {
//     box-shadow: $a $b $c $d;
// }
@mixin a3($shadow...) {
    box-shadow: $shadow;
}
.happy {
    width: 1000xp;
    height: 800px;
    border: 4px solid pink;
}
%hi {
    width: 800px;
    height: 800px;
    background: #ccc;
    margin: 0 auto;
}
.con {
    // @extend %hi;
    @extend .happy;
}
// 单行注释 哈哈哈哈
/*多行注释*/
.box {
    width: 500px;
    height: 500px;
    border: $box1;
    $bb: purple !global;
    font: {
        size: 30px;
        weight: bold;
        family: "Courier New", Courier, monospace;
        style: italic;
    }
    h1 {
        // color: $cc;
        // color: $dd;
        color: $bb;
        span {
            color: $cc;
            font-size: 15px;
        }
    }
    ul {
        li {
            color: $a;
            &:hover {
                color: $cc;
            }
        }
    }
}
.box1 {
    @include vase;
    @include a1(10px);
    @include a2;
    @include a3(10px 10px 10px blue);
    // @extend .happy;
}
// ul li:hover
// img[alt='www'] {}