Sass 基础用法（上）

嵌套

.nav {
    border: 1px solid grey;
    
    > ul { => 嵌套
        border: 1px solid green;
        > li {
            border: 1px solid red;
        }
    }
}

变量

$grey: grey; => 变量
$red: red;
$green: green;

.nav {
    border: 1px solid $grey;
    
    > ul {
        border: 1px solid $green;
        > li {
            border: 1px solid $red;
        }
    }
}

Mixin（类似于函数）

两处地方用相同代码时可以用Mixin讲法，相当于机械地拷贝CSS代码到不同地方。

@mixin debug($border-color: red) { => 默认传入的值是red
    border: 1px solid red;
}

.nav {
    @include debug(grey); => 引用debug(xxx)
    > ul {
        @include debug(red);
        > li {
            @include debug(green);
        }
    }
}

Placeholder（类似于类class）

两处地方用相同代码时，用Mixin时只是copy相同代码。用Placeholder 方法可以省略更多的代码 -> 将CSS代码只写一遍，而将选择器提到CSS代码前面。

%box {
    margin: 20px;
    box-shadow: 0 0 3px black;
    border-radius: 4px;
}

.nav {
    >ul {
        border: 1px solid red;
        >li {
            @extend %box;
        }
    }
}

.demo {
    @extend %box;
    height: 100px;
}