Web1020/18.scss/index.scss

$aa: #0f0;
// var aa = 
$box1: 3px !default;
// @import './reset.scss';
@mixin flower($xx,$yy) {
    width: 300px;
    height: 300px;
    color: $xx;
    background-color: $yy;
    border: 3px solid plum;
}
@mixin vase($cc...) {
    box-shadow: $cc;
}
@mixin water($dd:10px) {
    font-size: $dd
}
.tea {
    color: aqua;
    // font-style: italic;
    // font-weight: lighter;
    font: {
        weight: lighter;
        style: italic;
    }
}
%sun {
    color: #ff0
}
@function light($rr) {
    @return $rr * 2;
}
@import url('./reset.css');
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

// 这是标题的标签
/*
    今天天气真好
*/
h1 {
    color: #f00;
    $box2: 10px !global;
    @extend .tea;
}

ul {
    // width: 100px + 500px;
    width: (1600/2)+px;
    // width: 8 * 100px;
    // width: 900px - 100px;
    height: #{light(400)}px;
    border: $box2 dashed $aa;
    li {
        color: #f00 + #0f0;
        font: {
            size: 30px;
            weight: bold;
        }
        &:hover {
              color: #ff0;
        }
        &:nth-child(2):hover {
            color: #f00;
        }
        &:nth-child(3) {
            @include flower(blue,yellow);
            @include vase(30px 20px 10px #f00);
            @include water();
        }
        &:last-child {
            @extend %sun;
        }
    }
}