web250825/scss/index.scss

// var a = 1;
/*sasa*/
// @import url(rest.css);
@import './rest.scss';

@mixin flower {
    width: 200px;
    height: 100px;
    border: 2px solid #0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin news1($x) {
    border-radius: $x;
}

// @mixin news2($a:10px,$b:10px,$c:10px,$d:purple) {
//     box-shadow: $a $b $c $d;
// }
@mixin news2($aaa...) {
    box-shadow: $aaa;
}

.sun {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid #00f;
}
%rain {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid #0ff;
}

$aa: #f00;
$bb: 40;
$cc: lighter !default;

h1 {
    color: $aa;
    font-size: $bb + px;
    font-weight: $cc;
    $ab: 800 !global;
}

p {
    color: $aa;
    font-weight: $ab;
    @include flower;
    @include news1(50%);
    @include news2(10px 20px 10px aqua);
}

.main {
    ul {
        list-style: none;

        li {
            &:first-child a {
                color: #ff0;
                // @extend .sun;
                // @extend %rain;
            }

            a {
                text-decoration: none;

                // font-size: 30px;
                // font-weight: bold;
                font: {
                    size: 25px;
                    weight: bold;
                }

                &:hover {
                    color: $aa;
                }
            }

            // a:hover {}
        }
    }
}

// ul li:first-child a {
//     color: #ff0;
// }