$a: purple;
$b: skyblue !default;
$c: 2px solid #f00;
// @import url(demo.css);
@import "./demo.scss";
@mixin sun {
    width: 500px;
    height: 500px;
}
// var aa = xxx;
/*
    var aa = xxx1;
*/
@mixin rain($f) {
    font-size: $f;
}
@mixin snow($g:20px) {
    border-radius: $g;
}
// @mixin cloudy($h,$i,$j,$k) {
//     box-shadow: $h $i $j $k;
// }
@mixin cloudy($h...) {
    box-shadow: $h;
}
%hi {
    font-size: 30px;
}
.happy {
    cursor: pointer;
}
@function flower($x) {
    @return $x * 2;
}
.box {
    border: $c;
    $d: red !global;
    @include sun;
    @include snow();
    @include cloudy(10px 50px 15px yellow);
    h1 {
        // color: $a !important;
        color: $b;
        color: $d;
        // font-size: 50px;
        // font-style: italic;
        // font-weight: 300;
        font: {
            size: #{flower(12)}px;
            style: italic;
            weight: 300;
        }
    }
    ul {
        width: (1000px/4);
        background-color:#f00 + #0f0;
        border: $c;
        li {
            color: $d;
            // @extend .happy;
            @include rain(20px);
            &:hover {
                color: $a;
                // @extend %hi;
            }
        }
    }
}