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

// 函数
@function getWidth($x) {
    @return $x * 2;
}

/*
    声明：
        @function xx(形参) {
            @return 表达式;
        }
    使用：
        #{函数名(实参)}
*/


.one {
    width: #{getWidth(300)}px;
    // height: 300px+200px; 单位统一
    // height: 600px - 300px; 减法前后加空格
    // height: 300px * 2; 只允许一个数值有单位
    height: (600px/2); //需要添加括号
    // @extend %yy;
    color:  #0ff + #ff0; //分段运算
    border: 2px solid #00f;
}