// @import url(demo.css);
@import "./demo.scss";
$aa:#ff0;
$box: 50px !default;
$box1:30px !global;
@mixin part1 {
    width: 300px;
    height: 300px;
    border: 1px solid #00f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0f0;
    font-size: 24px;
}
@mixin part2($aa) {
    border-radius: $aa;
}
// 基类
@mixin part3($bb:40px,$cc:plum) {
    font-size: $bb;
    background: $cc;
}
@mixin part4($aa...) {
    box-shadow: $aa;
}
.vase1 {
    cursor: pointer;//鼠标变小手
}
%vase2 {
    color: #fff;
}
// 自定义函数
@function getMain($aa) {
    @return ($aa + 5) * 2;
}

.box {
    width: 800px;
    height: 800px;
    background: #f00;
    color: $aa;
    $bb: #0f0;
    // font-size: $box1;
    font: {
        size: 25px;
        weight: 200;
    }
    // h1 {
    //     color: $bb;
    // }
    a {
        color: $aa;
        &:hover {
            color: #00f;
        }
        @include part1;
        @include part2(20px);
        @include part3;
        @include part4(20px 15px 25px #0f0)
        // box-shadow: 20px 15px 25px #ff0;
    }
    h3 {
        width: #{getMain(100)}px;
        height: (400/2)+px;
        border: 1px solid #fff;
        // color: #0f0 + #00f;
        color: #f00 + #ff0;
        color: #00f + #000;
        color: #fff + #000;
        // @extend .vase1;
        &:hover {
            @extend %vase2;
        }
    }
}
.main {
    color: $aa;
}
// 哈哈哈哈哈
/*
    我哈哈哈哈哈哈
*/