SASS入门

变量

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

$primaryColor:#222;

body{
    color:$primaryColor
}

嵌套

sass可以进行选择器嵌套，表示层级关系，看起来很优雅整齐。

    nav{
        ul{maring:0;padding:0;list-style:none;}
        li{display:inline-block;}
        a{
            display:block;
            padding:6px 12px;
            text-decoration:none;
        }
    }

导入

sass中导入其他sass文件，最后编译一个css文件，优于纯css的@import

html,
body,
ui,
ol{
    margin:0;
    padding:0;
}

@import 'reset';
body{
    font-size: 100%;
    background-color:#efefef;
}

mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用，从此处理css3的前缀兼容轻松便捷。

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

扩展/继承

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

.message{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.success{
    @extend.message;
    border-color:green;
}

运算

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

.container{width:100%}
article[role="main"]{
    float:left;
    width:600px/960px*100%;
}
aside[role="complimentary"]{
    float:right;
    width:300px/960px*100%;
}

颜色

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

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