Sass语法记录

Sass语法记录

• 嵌套

.class1 {
    background-color: white;
    .class2 {
        height: 60px;
        font-size: 16px;
    }
}

相当于下面这种写法：

.class1 .class2 {
    height: 60px;
    font-size: 16px;
}
.class1 {
    background-color: white;
}

表示用了 class1样式的内部标签，用了class2的样式是

{   
        height: 60px;
        font-size: 16px;
}

class1的样式只是{background-color: white;}

另外一种情况如下，注意class1和class2中间的逗号

.class1, .class2 {
    height: 60px;
    font-size: 16px;
}
.class1 {
    color: red;
}

这种表示class1和class2拥有相同的样式

{height: 60px; font-size: 16px;}

同时class1还有{color: red;}