Sass

sass

1.变量

sass当中可以定义变量，方便统一维护和修改。

//sass style
//-------------------------
$fontStack: Helvetica, sans-serif;        
$primaryColor: #333;

body {
     font-family: $fontStack;
     color: $primaryColor;
}

//css style
//------------------------

body {
    font-family: Helvetica, sans-serif;
    color: #333;
}

2.嵌套

sass可以进行选择器的层级嵌套。

//sass style
//------------------------
nav {
    ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

//css style
//-------------------
nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    dispaly: block:
    padding: 6px 12px;
    text-decoration: none;
}

3.mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。

//sass style
//--------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing: $sizing;     
    -moz-box-sizing: $sizing;
    box-sizing: $sizing;

}
.box-border {
    border: 1px solid #ccc;
    @include box-sizing(border-box);
}

//css style
//---------------------------
.box-border {
    border: 1px solid #ccc;
    -webkit-box-sizing: $sizing;
    -moz-box-sizing: $sizing;
    box-sizing: $sizing;
}

4.扩展/继承

sass可通过 @extend来实现代码组合声明，使代码更加优越简洁。

//sass style
//-----------------------
.message {
    border: 1px solid #ccc;
    padding:　10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: red;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

//css style
//-------------------
.message, .success, .error, .warning {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    border-color: green;
}

.error {
    border-color: red;
}

.warning {
    border-color: yellow;
}

5.运算

sass可进行简单的加减乘除运算等。

//sass style
//-----------------------------------
.container { 
    width: 100%; 
}

article[role="main"] {
    float: left;
     width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
    float: right;
    width: 300px / 960px * 100%;
}

//css style
//-----------------------------------
.container {
    width: 100%;
}

article[role="main"] {
    float: left;
    width: 62.5%;
}

aside[role="complimentary"] {
    float: right;
    width: 31.25%;
}

颜色

sass中集成了大量的颜色函数，让变换颜色变得更加简单

//sass style
//-----------------------------------
$linkColor: #08c;

a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
        color:darken($linkColor,10%);
    }
}

//css style
//-----------------------------------
a {
    text-decoration: none;
    color: #0088cc;
}

a:hover {
    color: #006699;
}