VIP32/scss/index.scss

// @import url(reset.css);
@import './reset.scss';
$aa:#ff0;
$box:50px !default;
$box1:20px !global;

@mixin vase {
    border: 1px solid #f00;
    color: purple;
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin part6($aa,$bb,$cc) {
    width: $aa;
    height: $bb;
    background-color: $cc;

}
@mixin part1($a1) {
    border-radius: $a1;
}
@mixin part2($a1:20px,$a2:double) {
    border-radius: $a1;
    border: 3px $a2 #00f;
}
@mixin part3($aaa...) {
    box-shadow: $aaa;
}
.part4{
    cursor: pointer; //鼠标变小手
    width: 100px;
    height: 100px;
    background: plum;
}
%part5 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px dotted #0f0;
}
@function part7($a) {
    @return $a * 2;
}

.box {
    width: 800px;
    height: 800px;
    border: 1px solid #000;
    background-color: $aa;
    // @include part1(10px);
    @include part2();
    @include part3(30px 35px 15px #f0f);
    font: {
      size: 25px;
      weight: 600;
    }
    h1 {
        font-size: $box1;
        color: red;
        // @extend .part4;
    }
    .main {
        @include vase;
        color: #00f;
        &:hover {
            color: #f00;
        }
    }
    h2,h3,h4,h5,h6 {
        // @extend .part4;
        // @extend %part5;
        // @include part6(100px,200px,#0ff)
        // #{函数名(变量值)}px
        width: (400/2) + px;
        height: #{part7(150)}px;
        background-color: #ff0+#0f0; // #ff0
        background-color: #f00+#fff; // #fff
        margin-top: 20px;
    }
}
// .main::after {
//     content: '放假了';
//     color: #f00;
// }

// 今天天气真好
/*
    哈哈哈哈
*/