W0407/scss.scss/index.scss

// @import url(reset.css);
@import "./reset.scss";
// 变量
/* 你好 */
$a: #f00;
$b: 50;
$c: #ff0 !default;


// 占位符
// %placeholder => %
%www {
    color: aquamarine;
}

// 基类
.windy {
    color: #ff0;
    background-color: #f00;
}

@mixin sun {
    width: 200px;
    height: 300px;
    margin: 10px;
    // border-radius: 20px;
    border: 3px solid #00f;
    // box-shadow: 30px 20px 4px #f00;
}
@mixin rain($x) {
    border-radius: $x;
}

@mixin tea($x:$a) {
    background:$x;
}
@mixin box1($x...) {
    box-shadow: $x;
    // box-shadow: $x $q $w $r;
    // @if length($x) >= 3 {
    //     box-shadow: $x;
    // } @else {
    //     box-shadow: 30px 20px 4px plum;
    // }
}
@function xxx($a) {
    @return 200 * $a;
}
h1 {
    width: #{xxx(2)}px;
    // height: #{xxx(3)}px;
    // height: 200px - 10px;
    // height: 200px * 4;
    height: (200px / 2);
    // height: 200px + 200px;
    // color: $a !important;
    font-size: $b + px;
    background: #ff0 + #000;
    // @extend .windy;
    // @extend %www;
    // color: $vase;
    // @include sun;
    // @include rain(30px);
    // @include tea;
    // @include box1(30px 20px 4px plum)
}

// ul {
//     width: 400px;
//     height: 400px;
//     background: #ff0;
//     list-style: none;
// }
// ul li {
//     $d:#00f !global;
//     padding: 10px;
// }
// ul li a{
//     text-decoration: none;
//     color: #00f;
//     font-size: 30px;
// }
// ul li a:hover {
//     color: $a;
// }

ul {
    width: 400px;
    height: 400px;
    background: #ff0;
    list-style: none;

    @extend .windy;
    @include sun;
    li {
        $d: #00f !global;
        padding: 10px;
        a {
            text-decoration: none;
            color: #00f;
            // font-size: 30px;
            // font-weight: bold;
            font: {
                size: 40px;
                weight:bold
            }
            &:hover {
                color: $a;
            }
        }
    }
}
/*
    混合宏
    @mixin 允许定义一个可以再整个样式表复制的样式
    @include 可以将mixin混入到整个样式表中
*/
p {
    color: $d;
}