scss语法

SCSS其实就是SASS新语法, 增强了对CSS3语法的支持

1.变量（Variables）

/*声明变明*/
$color: #333;
$bgcolor:#f36;

/*引用变量*/
body { body color: $color;}

2.嵌套(Nesting)

// 选择器的嵌套

// 传统css写法
section { margin: 10px; }
section nav { height: 25px; }
section nav a { color: #0982c1; }
section nav a:hover { text-decoration: underline; }

// scss写法
section{
    margin: 10px;
    nav{
        height: 25px;
        a{
            color: #0982c1;
            &:hover{ text-decoration: underline;}
        }
    }
}

// 属性嵌套

// 传统css写法
li { font-style: italic; font-family: serif; font-weight: bold; font-size:1.2em; }

// scss写法
li{
    font:{
        style: italic;
        family: serif;
        weight: bold;
        size:1.2em;
    }
}

3.Mixins ==> Mixins是SASS中最强大的特性之一, 简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用, 每个都写在选择器里

// 格式
@mixin name($参数名：参数值){
    /*样式规则*/
}

// 简单的实例
@mixin error($borderWidth:2px){
    border: $borderWidth solid #f00;
    color: #f00;
}

// @include调用mixin
/*直接调用error Mixins*/
.generic-error {
    @include error();
} 

/*调用error Mixins，并将$borderWidth参数重定义为3px*/
.login-error {
    @include error(3px);
}

老的语法中还支持另一种调用Mixins的方法。就是使用+
.generic-error
    +error()
.login-error
    +error(3px)

3.选择器继承（Selector Inheritance） ==> SASS可以从一个选择器继承另一个选择器下的所有样式。共用属性

%block {
    margin: 10px 5px;
    padding: 2px;
}
p {
    @extend %block;
    border: 1px solid #eee;
}
h1{
    @extend %block;
    color:red;
}

// 编译出来的CSS
p{
    border: 1px solid #eee;
}
h1{
    color:red;
}
p, h1{
    margin: 10px 5px;
    padding: 2px;
}