小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

sass

编译的style有四种格式

• ested，嵌套
• conmpact， 紧凑
• expanded， 扩展
• compressed ， 压缩

基础

变量

使用$定义变量

$size:12px
    /* 可以在全局使用定义的变量 */
div.dox{
	whith:$size;
}

对应的css

div.dox{
	whith:12px
}

嵌套

.nav{
	hight: 100px;
    ul {
		margin: 0;
        li{
            float:left;
            list-style:none;
            padding:5px;
        }
    }
}

对应的css

.nav{
	hight: 100px;
}
.nav ul {
	margin: 0;
}
.nav ul li{
     float:left;
     list-style:none;
     padding:5px;
}

调用父选择器

.nav{
	hight: 100px;
    ul {
		margin: 0;
        li{
            float:left;
            list-style:none;
            padding:5px;
        }
        a{
            display:block;
            color:#000;
            padding: 5px;
            &:hover{
                background-color:#0d2f7e;
                color:#fff;
            }
        }
    }
    & &-text{
		font-size: 15px;
    }
}

对应的css

.nav{
	hight: 100px;
}
.nav ul {
	margin: 0;
}
.nav ul li{
     float:left;
     list-style:none;
     padding:5px;
}
.nav ul a:hover{
	background-color:#0d2f7e;
     color:#fff;
}
.nav .nav-text{
    font-size:15px;
}

嵌套属性

body{
    font:{
        family: Helvetica，Arial, sans-serif;
		size: 15px;
        weight: normal;
    }
}

对应的css

body {
    font-family: Helvetica，Arial;
    sans-serif;
    font-size: 15px;
    font-weight: normal;
}

mixin

@mixin alert {icolor: #8a6d3b ;
	background-color : #fcf8e3;
    a {
		color :#664c2b;3
    }
}
.alert-warning {
    @include alert;
}

对应的css

.alert-warning {
    color: #8a6d3b;
	background-color : #fcf8e3;
}
.alert-warning a {
    color: #664c2b;
}
	

mixin里的参数

@mixin alert($text-color，$background) {
    color: $text-color;
	background-color : $background;
    a {
		color: darken($text-color，10%);
    }
}
.alert-warning {
	@include alert(#8a6d3b，#fcf8e3);
}
.alert-info {
	include alert($background : #d9edf7,x$text-color :#31708f);
}

对应的css

.alert-warning {
	color : #8a6d3b ;
	background-color : #fcf8e3;
}
.alert-warning a {
    color: #66512c;
}
.alert-info {
    color: #31708f;
    background-color : #d9edf7;
}
.alert-info a {
    color: #245269;
}

继承/扩展

.alert{
    padding:15px;
}
.alert a{
    font-weight:bold;
}
.alert-info{
	@extebd .alert
    background-color: #d9edf7;
}

对应的css

.alert, .alert-info{
	padding:15px;
}
.alert a, .alert-info a{
	font-weight:bold;
}
.alert-info{
    background-color: #d9edf7;
}

Partials 与 @import

style.scss文件

@import "base";
.alert {
	padding: 15px;
}
.alert a {
	font-weight : bold;
}
.alert-info {
	extend .alert;
	background-color : #d9edf7 ;
}

_base.scss文件

body {
	margin: 0;
	padding: 0;
}

对应的css

body {
	margin: 0;
    padding: 0;
}
.alert, .alert-info{
	padding:15px;
}
.alert a, .alert-info a{
	font-weight:bold;
}
.alert-info{
    background-color: #d9edf7;
}

注释

/*多行注释*/
在压缩模式下多行注释需要强制输入格式：/*!多行注释*/
单行注释是不显示的