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;
}


@function size($p) {
    @return $p * 4;
}

// 继承
.vase {
    font-size: 26px;
    color: plum
}

// 占位符
%www {
    color: red;
    font-style: italic
}

.box {
    // @extend .vase;
    // @include aaa;
    width: #{size(100)}px;
    // height: 400px - 100px;
    // height: 100px + 300px;
    // height: 100px * 6;
    height: (1000px / 2);
    background: #00f + #ff0;
    @include bbb(50px);
    // @include ccc;
    @include ddd(5px 10px 10px red);

    b {
        // @extend %www;
    }

    p {
        // @extend .vase;
    }

    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;
                }
            }

        }
    }

}