// @import url(reset.css);
@import "./reset.scss";
$bg: #00f;
$ww: 30px !default;
$a: bold;
p {
    color: $bg;
    font-size: $ww;
    $cc: #f00 !global;
    //我的注释1
    /*
        多行注释
    */
}
@mixin border($radius:20px,$style:double) {
    border:10px $style #f00;
    color: #00f;
    background-color: #ff0;
    font-size: 30px;
    width: 200px;
    height: 100px;
    margin-top: 20px;
    border-radius: $radius;
    
}
@mixin bos($shadow...) {
    box-shadow: $shadow;
}
.box {
    @include border;
    @include bos(10px 10px 10px #0f0)
    // h1 {
    //     .main {
    //         color: aquamarine;
    //     }
    // }
    // h2 {
    //     color: #f00;
    // }
    // h3 {
    //     color: blueviolet;
    //     a {
    //         font-size: 30px;
    //         &:hover {
    //             color: aqua;
    //         }
    //     }
    // }
}


.newBox {
    @include border;
}

#list {
    width: 200px;
    height: 200px;
    background: #f00;
}

.newList {
    // @extend .box;
}

%a1 {
    color: #0f0;
}

.newList {
    // @extend %a1;
}


@function fn1($aa) {
    @return $aa*2;

}

.mask {
    width: #{fn1(20)}px;
    height: 50px;
    background: #0f0 + #f00;
}