Vip4.0W/14.scss/index.scss

$aa: blue;
$bb: 2px solid #f00;
$cc: 400 !default;
// $dd: purple !global;
$dd: purple !important;
// 这是h2标签的样式
/* 哈哈哈哈 */
// @import url(reset.css);
@import './reset.scss';

h2 {
    width: $cc + px;
    height: 300px;
    color: $dd;
    color: $aa;
    border: $bb;
}

ul {
    li {
        color: red;
        &:first-child {
            color: #0f0;
        }
        font: {
            size: 40px;
            weight: bold;
        };
    }
}

// 不带参的混合宏
// @mixin x {
//     color: #f00;
//     background: #ff0;
//     border-radius: 20px;
// }

// .one {
//     width: $cc + px;
//     height: $cc + px;
//     @include x;
// }

// 带参混合宏
// (带参 不带值)
// @mixin x($cccc) {
//     color: #f00;
//     background: #ff0;
//     border-radius: $cccc + px;
// }

// .one {
//     width: $cc + px;
//     height: $cc + px;
//     @include x(50);
// }

// // (带参 带值)
// @mixin x($cccc:50%) {
//     color: #f00;
//     background: #ff0;
//     border-radius: $cccc;
// }

// .one {
//     width: $cc + px;
//     height: $cc + px;
//     @include x;
// }

// 带参 多值
// @mixin x($c...) {
//     color: #f00;
//     background: #ff0;
//     border-radius: 20px;
//     box-shadow: $c;
// }

// .one {
//     width: $cc + px;
//     height: $cc + px;
//     @include x(55px 40px 30px blue);
// }

// 继承
// 基类
// .vase {
//     font-size: 30px;
//     color: #0f0;
// }

// .one {
//     width: $cc + px;
//     height: $cc + px;
//     @extend .vase;
// }

// 占位符
// %
%yy {
    color: #f00;
    font-style: italic;
    font-weight: 700;
}

.one {
    @extend %yy;
}