W250511/16.scss/index.scss

// @import url(reset.css);
@import './reset.scss';
$a: red !default;
$b: 30;
$d: purple;

// $ 定义变量 用于存储信息 可以重复使用
// 存储的类型：字符串 数字 颜色 布尔值 null...
/*
    多行注释
    .sass .scss
    sass格式会省略花括号和分号 所以常用scss存储
*/

/*
 混合宏
 @mixin 声明
 @include 调用
*/
@mixin border {
    // border-radius: 20px;
    border-bottom: 3px solid #ff0;
}
@mixin border1($a) {
    border-radius: $a + px;
    border-left: 3px solid #0f0;
}
@mixin border2($b:50,$d:5) {
    border-radius: $b + px;
    border-right: $d + px solid pink;
}
@mixin border3($x) {
     box-shadow: $x;
}
.box {
    width: 200px;
    height: 200px;
    font-size: $b + px;
    border: 3px solid $a;
    @include border;
    @include border1(30);
    @include border2;
    @include border3(30px 40px 13px purple);
}

h1 {
    $c: blue !global;
    color: $c;
}

h2 {
    // color: $a !important;
    color: $c;
}

// ul {
//     overflow: hidden;
// }

// ul li {
//     float: left;
//     margin-left: 5px;
// }
// 1.标签嵌套
// 2.伪类嵌套
// 3.属性嵌套
ul {
    overflow: hidden;

    li {
        float: left;
        margin-left: 5px;
        border-bottom: 2px solid #f00;

        a {
            color: #000;

            // font-size: 30px;
            // font-weight: bold;
            font: {
                size: 40px;
                weight: bold;
            }

            &:hover {
                color: red;
            }
        }
    }
}