Scss规范你的css

简介

Sass是成熟、强大、稳定的CSS预处理器，而CSS是Sass3版本当中引入的新语法特性，完全兼容css3的同时继承Sass强大的动态功能

特性概览

css书写代码规模较大的Web应用时，容易造成选择器，层叠的复杂度过高，因此推荐通过Sass需处理进行css的开发，Sass提供的遍历，嵌套，混合，继承等特性，让css更加有趣和规范

变量

变量用来存储需要在css中复用的信息 - 例如颜色和字体 Sass通过$符号去声明一个变量

$primary-color:#333
body{
    color:$primary-color;  // color:#333
}

嵌套

Sass允许开发人员以嵌套的方式使用css，但是过度的使用嵌套会让产生的css难以维护，并且看起来很复杂混乱

nav{
    ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    li{
        display:inline-block;
    }
    a{
        display:block;
        padding:6px 12px;
    }
}
// Scss这种写法具有更高的可读性，是编写css的良好方式
// 相当于
nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
nav li{
    display:inline-block;
}
nav a{
    display:block;
    padding:6px 12px;
}

引入

Sass能够将代码分割成多个片段，并用underscore风格的下划线作为其命名前缀(_partial.scss),Sass会通过这些下划线来辨别哪些文件是Sass片段，并且不让片段内容直接生成为css文件，从而只是在使用@import指令的位置被导入。css原生的@import会通过额外的HTTP请求获取引入的样式片段，而Sass的@import则会直接将这些引入的片段合并到当前css文件，并且不会产生新的HTTP请求 下面这段代码，在base.scss文件当中引入_reset.scss片段

// reset.scss
html,body,ul,ol{
    margin:0;
    padding:0;
}
// base.scss
@import 'reset'
body{
    background-color:#333
}
// Sass中引入片段，可以缺省扩展名
// 相当于
html,body,ul,ol{
    margin:0;
    padding:0;
}
body{
    background-color:#efefef;
}

混合

混合（Mixin）用来分组那些需要在页面中复用的css声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候十分有用，Sass目前使用@mixin name指令来定义混合操作

@mixin border-radius($radius){
    border-radius:$radius
    -ms-border-radius:$radius; // 兼容性
    -moz-border-radius:$radius; // 兼容性
    -webkit-border-radius:$radius; // 兼容性
}
.box{
    @include border-radius(10px) // 通过@include使用Mixin
}
// 编译后相当于
.box{
    border-radius:10px;
    -ms-border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

继承

继承是Sass中非常重要的一个特性，可以通过@extend指令在选择器之间复用css属性，并且不会产生冗余的代码

// 这段代码不会被输出到最终生成的css文件，因为它没有被任何代码所继承
%other-styles{
    display:flex;
    flex-wrap:wrap;
}
// 而下面这段代码会正常的被输出到生成的css文件，因为它被其接下来的代码所继承
%message-common{
    border:1 solid #ccc;
    padding:10px;
    color:#333;
}
.message{
    @extend %message-common; // 继承
}
.success{
    @extend %message-common;  // 继承
    border-color:green;
}
// 编译后相当于
.message,.success{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.success{
    border-color:green;
}

操作符

Sass提供了标准的算术运算符，例如 +、-、*、/、%

.container{
    width:100%
}
.article[role = 'main']{
    float:left;
    width:600px / 960px * 100%;
}
aside[role = 'complementary']{
    float:right;
    width:300px / 960px * 100%;
}
// 编译后相当于
.container{
    width:100%;
}
.article[role='main']{
    float:left;
    width:62.5%;
}
.aside[role='complementary']{
    float:right;
    width:31.25%;
}

css扩展

引用父级选择器&
Scss使用$关键字在css规则中引用父级选择器

a{
    font-weight:bold;
    $:hover{  // & 指代a
        text-decoration:underline;
    }
    body.firefox &{  // & 指代a
        font-weight:normal;
    }
}
// 编译后相当于
a{
    font-weight:bold;
    text-decoration:none;
    a:hover{
        text-decoration:underline;
    }
    body.firefox a{
        font-weight:normal;
    }
}

// 无论css规则嵌套深度如何，关键字&都会使用父级选择器替换全部其出现的位置
#main{
    color:black;
    a{
        font-weight:bold;
        &:hover{ color:red; } // & 指代#main a
    }
}
// 编译后相当于
#main{
    color:black;
    a{
        font-weight:bold;
        #main a{
            font-weight:bold;
            #main a:hover{
                color:red;
            }
        }
    }
}

// &必须出现在复合选择器开头的位置，后面再来链接自定义的后缀
#main{
	color:black;
    &-sidebar{ border:1px solid; }
}
// 编译后相当于
#main{
    color:black;
    #main-sider{
        border:1px solid;
    }
}
// 如果在父级选择器不存在的场合下使用&，Scss预处理器会报出错误信息

嵌套属性

css许多属性都是位于相同的命名空间(例如font-family，font-size，font-weight都会位于font命名空间下），Scss当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下

.demo{
    // 命令空间后带有冒号：
    font：{
        family：fantasy;
        size:30em;
        weight:bold;
    }
}
// 编译后相当于
.demo{
    font-family:fantasy;
    font-size:30em;
    font-weight:bold;
}

// 命名空间上可以直接书写css简写属性，但是日常开发中建议直接书写css简写属性，尽量保持css语法的一致性
.demo{
    font:20px/24px fantasy{
        weight:bold;
	}
}
.demo{
    font:20px/24px fantasy;
    font-weight:bold;
}