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

相关推荐