W260426/13.sass/index.scss

// @import url(reset.css);
@import './reset.scss';
$a: #ff0;
$b: 70 !default;


/*
    混合宏
    @mixin 定义一个可以在整个样式表中重复使用的样式
    @include 调用
 */
@mixin aaa {
    // border-radius: 20px;
    border: 3px solid #00f;
}

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

@mixin ccc($w:500px, $h:500px) {
    width: $w;
    height: $h;
}

@mixin ddd($q...) {
    box-shadow: $q;
}

.box {
    @include aaa;
    @include bbb(50px);
    @include ccc;
    @include ddd(5px 10px 10px red);

    h1 {
        color: $a;
        font-size: $b + px;
        $c: red !global;
    }

    // 这是一条注释 单行注释 编译后不会出现在css中
    /* 多行注释  编译后会出现在css中 */
    // 嵌套 选择器嵌套
    ul {
        li {
            a {
                color: $c;

                // font-size: 20px;
                // font-style: italic;
                // 属性嵌套
                font: {
                    size: 30px;
                    style: italic;
                }

                // 伪类嵌套
                &:hover {
                    color: #ff0;
                }
            }

        }
    }

}