简单用法：
sass中可以定义变量，方便统一修改和维护。
//sass style
$fontStack: Helvetica, sans-
$primaryColor: #333;
font-family: $fontStack;
color: $primaryColor;
//css style
font-family: Helvetica,
sans-serif; color: #333;
sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
//sass style
margin: 0;
padding: 0;
list-style: none;
li { display: inline-block; }
display: block;
padding: 6px 12px;
text-decoration: none;
//css style
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
display: block;
padding: 6px 12px;
text-decoration: none;
sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//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: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
//sass style
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
.success {
border-color: green;
border-color: red;
.warning {
border-color: yellow;
//css style
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
.success {
border-color: green;
border-color: red;
.warning {
border-color: yellow;
sass中集成了大量的颜色函数，让变换颜色更加简单。
//sass style
$linkColor: #08c;
text-decoration:none;
color:$linkColor;
color:darken($linkColor,10%);
//css style
text-decoration: none;
color: #0088cc;
color: #006699;
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(不使用大括号和分号)或者.scss(使用大括号和分号)
ass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。
sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。&sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
//sass style
$baseLineHeight:
$baseLineHeight:
line-height: $baseLineHeight;
//css style
line-height:2;
特殊变量：
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
//sass style
$borderDirection:
$baseFontSize:
$baseLineHeight:
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #
//应用于复杂的属性值
font:#{$baseFontSize}/#{$baseLineHeight};
//css style
.border-top{
border-top:1px solid #ccc;
font: 12px/1.5;
多值变量：
分为list类型和map类型，简单来说list类型类似js中的数组，map类型类似于js中的对象
数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。
//list定义
//一维数据
$px: 5px 10px 20px 30
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30
$px: (5px 10px) (20px 30px);
//sass style
$linkColor: #08c #333 !//第一个值为默认值，第二个鼠标滑过值
color:nth($linkColor,1);
color:nth($linkColor,2);
//css style
color:#08c;
color:#333;
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值,&关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等
//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
//css style
font-size: 2em;
font-size: 1.5em;
font-size: 1.2em;
全局变量：
在变量值后面加上!global
变量机制：
在选择器声明的变量会覆盖外面全局声明的变量
//sass style
$fontSize:
$fontSize: 14px;
font-size:$fontSize;
font-size:$fontSize;
//css style
font-size:14px;
font-size:14px;
启用global之后的机制：
默认在选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。
嵌套Nesting:
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
选择器嵌套：
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器
//sass style
line-height: 40px;
text-transform: capitalize;
float:left;
display: block;
padding: 0 10px;
color: #fff;
color:#ddd;
//css style
line-height: 40px;
text-transform: capitalize;
#top_nav li{
float:left;
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
#top_nav a:hover{
color:#ddd;
属性嵌套：
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。
//sass style
.fakeshadow {
style: solid;
width: 4px;
color: #888;
width: 2px;
color: #ccc;
//css style
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
//sass style
//没有跳出
.parent-1 {
color:#f00;
width:<span style="color: #px;
//单个选择器跳出
.parent-2 {
color:#f00;
@at-root .child {
width:<span style="color: #px;
//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
width:<span style="color: #px;
width:<span style="color: #px;
//css style
.parent-1 {
color: #f00;
} .parent-1 .child {
width: 100px;
.parent-2 {
color: #f00;
width: 200px;
.parent-3 {
background: #f00;
width: 300px;
width: 400px;
@at-root (without: ...)和@at-root (with: ...)：
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
//sass style
//跳出父级元素嵌套
@media print {
color:#f00;
@at-root .child1 {
width:<span style="color: #px;
//跳出media嵌套，父级有效
@media print {
color:#f00;
@at-root (without: media) {
width:200px;
//跳出media和父级
@media print {
color:#f00;
@at-root (without: all) {
width:200px;
//css style
@media print {
.parent1 {
color: #f00;
width: 200px;
@media print {
.parent2 {
color: #f00;
.parent2 .child2 {
width: 200px;
@media print {
.parent3 {
color: #f00;
width: 200px;
@at-root与&配合使用：
//sass style
@at-root .parent &{
color:#f00;
//css style
.parent .child {
color: #f00;
应用于@keyframe:
//sass style
animation: motion 3s infinite;
@at-root {
@keyframes motion {
//css style
animation: motion 3s infinite;
@keyframes motion {
混合(mixin)
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
无参数mixin:
//sass style
@mixin center-block {
margin-left:auto;
margin-right:auto;
@include center-
//css style
margin-left:auto;
margin-right:auto;
有参数mixin:
//sass style
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
//css style
@ //参数使用默认值
.opacity-80{
@include opacity(80); //传递参数
多个参数的mixin:&调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。
//sass style
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
.imgtext-h--product li{
@include horizontal-line($padding:15px);
//css style
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
多组值参数mixin:&如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。
//sass style
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
//css style
border:1px solid #ccc;
-webkit-box-shadow:<span style="color: #px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:<span style="color: #px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
@content:&@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。
//sass style
@mixin max-screen($res){
@media only screen and ( max-width: $res )
@include max-screen(480px) {
body { color: red }
//css style
@media only screen and (max-width: 480px) {
body { color: red }
PS：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。
继承：&sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器
//sass style
border: 4px solid #ff9aa9;
@extend h1;
border-width: 2px;
//css style
h1,.speaker{
border: 4px solid #ff9aa9;
border-width: 2px;
占位选择器%：&从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
//sass style
color: transparent;
text-shadow: none;
border: 0;
%clearfix{
@if $lte7 {
content: "";
display: table;
font: 0/0 a;
clear: both;
width:<span style="color: #px;
//css style
#header h1,
color: transparent;
text-shadow: none;
border: 0;
#header h1{
width:<span style="color: #px;
如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
ps：在@media中暂时不能@extend&@media外的代码片段，以后将会可以。
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始，&实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
//sass style
$baseFontSize:
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1
font-size:$baseFontSize;
color:lighten($gray,10%);
font-size:pxToRem(16px);
color:darken($gray,10%);
//css style
font-size:10px;
color:#E6E6E6;
font-size:<span style="color: #rem;
color:#B3B3B3;
运算：&sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。
$baseFontSize:
$baseLineHeight:
$baseFontSize * $baseLineHeight !
$halfBaseGap:
$baseGap / 2
$samllFontSize:
$baseFontSize - 2px
$_columns:
// Total number of columns
$_column-width:
// Width of a single column
// Width of the gutter
$_gridsystem-width:
$_columns * ($_column-width + $_gutter); //grid system width
条件判断及循环：
@if 可以一个条件单独使用，也可以和@else结合多条件使用
//sass style
display:inline-block;
@if $lte7 {
*display:inline;
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
color: black;
//css style
display:inline-block;
*display:inline;
color: green;
三目判断：
语法为：if($condition, $if_true, $if_false)&。三个参数分别表示：条件，条件为真的值，条件为假的值
if(true, 1px, 2px) =& 1px
if(false, 1px, 2px) =& 2px
for循环：for循环有两种形式，分别为：@for $var from &start& through &end&和@for $var from &start& to &end&。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
//sass style
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
//css style
width: 2em;
width: 4em;
width: 6em;
@each循环：
语法为：@each $var in &list or map&。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环：
//sass style
$animal-list: puma, sea-slug, egret,
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
//css style
.puma-icon {
background-image: url('/images/puma.png');
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
.egret-icon {
background-image: url('/images/egret.png');
.salamander-icon {
background-image: url('/images/salamander.png');
多个字段list数据循环：
//sass style
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $
//css style
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
多个字段map数据循环：
//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
//css style
font-size: 2em;
font-size: 1.5em;
font-size: 1.2em;
命令行编译：
单文件转换：sass style.scss style.css
单文件监听：sass --watch style.scss style.css
文件夹监听：sass --watch sassFileDir:cssFileDir
css文件转换成sass/scss文件：
sass-convert style.css style.sass
sass-convert style.css style.scss
运行命令行帮助文档，可以获得所有的配置选项：&sass -h
一般常用的有--style，--sourcemap，--debug-info等：
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
- --style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。
color: #fff;
background-color: #000; }
width: 10em; }
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
// expanded
color: #fff;
background-color: #000;
width: 10em;
font-size: 10em;
font-weight: bold;
text-decoration: underline;
// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
// compressed
#main{color:#fff;font-weight:bold;text-decoration:underline}
- --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
- --debug-info表示开启debug信息
图形化工具gui&&
sass调试需要开启编译时输出调试信息和浏览器调试功能，两者缺一不可。
开启编译调试信息：
目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）。
如开启的是debug-info，则解析的css文件中会有以@media -sass-debug-info开头的代码，如没有则表明没有开启。
如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。
命令行开启调试：
sass --watch style.scss:style.css --debug-info
sass --watch style.scss:style.css --sourcemap
koala开启：
如下图：点击相应的文件，然后就会出现右边的编译选项，即可选择是否开启source map，debug info
开启浏览器调试：
谷歌浏览器调试：
F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map&和&Auto-reload generated CSS。
开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件
点击scss文件，会跳到source里面的scss源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的scss源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。
火狐浏览器调试
debug-info调试
firefox可以安装插件使用debug-info来调试。
开启--debug-info编译，f12打开firebug，就可以看到原先右边的css文件变成了我们现在的scss文件
sourcemap调试
firefox 29 将会开始支持sourcemap，注意是火狐自带的调试功能，而不是firebug。
开启--sourcemap编译，右键&查看元素&采用火狐自带的调试功能，打开调试面板，在样式上右键选择&显示原始来源&。
点击scss文件，这样就跳到了scss文件。如下图：
然后就可以进行我们的修改了，修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里，同谷歌一样直接覆盖到我们本地的源文件就ok了。
1.sassCore
sassCore分核心文件和扩展文件两种。其中核心文件提供一些基础的样式和@mixin，%等方便调用；而扩展文件则提供一些模块的样式，如form，table等
核心文件调用：
1.除了提供基础功能外，会产生reset样式 @import "d:/sassCore/base"
2.不产生任何样式，只提供功能的调用 @import &d:/sassCore/function&
扩展文件调用：
按需调用： @import "d:/sassCore/ext/table"
注：因为sass不能导入在线sass文件，而sassCore也没有提供安装版的使用，所以默认统一放在D盘进行调用
1.sassCore涵盖范围广。核心文件有setting，css3，media-queries，mixin，grid，reset；扩展文件有animate，font-face，btn，message，form，table，helps，typography；除此之外还有两个集合文件function和base。
2.sassCore对兼容采用了开关控制机制。如对是否支持ie6/7可以通过设置为true或false以生成对应的代码。
3.sassCore严格控制样式冗余累赘。使用开关变量做到需要什么样式就加载什么样式，按需开启，避免样式冗余累赘。
4.sassCore设计了两种调用方式，一种是只调用功能，不产生任何多余的css代码；另一种是包含了些重置样式。为团队的合作开发提供了良好的解决方案。
5.- sassCore借鉴优秀的作品，根据实战创造新的方法，紧跟前沿，每一个文件都是经过深思熟虑，几易其稿，在实用和卓越上狠下功夫。
命名规则：
变量以及@function采用驼峰式写法@mixin %采用中划线
文件简述：
sassCore包括两个集合文件（base，function）和两个文件夹（core，ext）。其中core文件夹中为核心基础文件，包括setting，css3，media-queries，mixin，grid，reset；而ext文件夹中是一些扩展文件，包括animate，font-face，btn，message，form，table，typography，helper。
两个集合文件（base，function）导入的都是core中的文件，区别在于base除了提供基本功能之外还会生成一份reset样式，而function则只提供基本功能。至于ext中的文件则属于额外的一些模块扩展，可根据需求导入。
负责基础变量的文件，如常用的颜色，字体等变量。
负责css3属性前缀的文件。
media-queries
负责响应式宽度判断的文件。主要是对响应式布局的一些宽度判断，来自paranoida的sass-mediaqueries。
负责功能方面的文件。这里大概分成三个部分，一个是混合部分即mixin，一个是placeholder选择器部分即%，最后就是我们的function函数部分。我们常用的include及extend当然就是来自于这里了。
负责网格系统的文件。默认为固定宽度布局（1000px），可以通过设置$gridPercentSwitch为true来切换为流体布局，也可以通过设置$gridSpanSwitch为true或false来控制是否输出各个网格的class。
在normalize的基础上，根据目前我们大家的使用习惯进行了一些归零行动，及设置文字字体颜色，是否输出打印样式。
将animate.css转成scss版本，默认不输出任何样式，需要什么动画先导入对应的动画文件，然后include调用即可。
来自Font Awesome的字体图标，可以根据自己的需求使用其他字体图标，默认不输出任何class，可根据实际需求输出其中的某些icon。参考了大漠的font-awesome模块
为按钮设计的文件，里面定义了一系列mixin，可用于自定义按钮，默认生成两种按钮
交互提示信息，包括警告，错误，成功，提示四种状态的样式
提供了表单元素样式及几种常见的表单组合样式，可通过变量控制输出
提供几种常用的表格样式，可通过变量来控制输出
常用的几个class，可以根据自己的喜好定义。
typography
负责文字排版的文件。这里主要考虑到文章详细页和其他页面的一些不同情况而给详细页加入了article这个class，里面的一些元素如ul，li，p给予一定的样式，而不是清零。
阅读(...) 评论()中国领先的IT技术网站
51CTO旗下网站
SASS初学者入门
曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。
作者：oschina来源：开源中国| 09:19
Sass 是什么？
Sass 是Syntactically Awesome Stylesheete Sass的缩写，是由Hampton Catlin开发的。
Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！
例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。
Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承。
Sass看起来似乎和css很像，但它没有分号和大括号。
以下是css的表示：
#skyscraper_ad &{ &&&display:&block; &&&width:&120px; &&&height:&600px;& &} &&#leaderboard_ad& &{ &&&display:&block; &&&width:&728px; &&&height:&90px;& &}&
在sass中将会这样写：
#skyscraper_ad &&&display:&block&&&width:&120px&&&height:&600px&&#leaderboard_ad& &&&display:&block&&&width:&728px&&&height:&90px&
Sass用两个空格缩进来定义代码的嵌套。
通过以上的展示，你已经了解了Sass怎么书写，接下来看一下一些让sass变的如此神奇的一些东西。
$red:&#FF4848&
在Sass中，可以使用像darken和lighten函数来修改变量值。
在下面的例子中，p标签中的red将会比h1中的red更深。
$red:&#FF4848&$fontsize:&12px&h1&&&color:&$red&&p &&&color:&darken($red,&10%)&
你能够运用&加&或&减&操作符来对相同类型的变量进行运算，如果我们想要手动的轻微的加深一个颜色值，可以通过'-'来减去#101，同样我们可以通过&+&来将字体值增大10px。
p.addition_and_subtraction &&&color:&$red&-&#101&&&font-size:&$fontsize&+&10px&
嵌套可以分为两种类型：
选择器嵌套
选择器嵌套是第一种类型嵌套。
sass中的嵌套和html中的嵌套是相似的。
$fontsize:&12px&&.speaker &&&.name &&&&&font: &&&&&&&weight:&bold&&&&&&&size:&$fontsize&+&10px&&&.position &&&&&font: &&&&&&&size:&$fontsize&
如果你看一下编译后生成的css，你将会看见嵌套的.speaker类下的.name类生成的css选择器：.speaker .name。
.speaker&.name&{ &&&font-weight:&bold; &&&font-size:&22px;&} &.speaker&.position&{ &&&font-size:&12px;&}&
&属性嵌套&是第二种类型的嵌套。
你可以嵌套带有相同前缀的属性。
$fontsize:&12px&.speaker &&&.name &&&&&font: &&&&&&&weight:&bold&&&&&&&size:&$fontsize&+&10px&&&.position &&&&&font: &&&&&&&size:&$fontsize&
从以上的例子中可以看出，我们让font:另起一行，并且给了两个空格的缩进，然后，就可以设置原来带连字符的属性了。
所以当我们以上面的格式书写font的属性weight时，这种格式会自动生成css属性font-weight:
.speaker&.name&{ &&&font-weight:&bold; &&&font-size:&22px;&} &.speaker&.position&{ &&&font-size:&12px;&}&
所有带连字符的选择器都支持以上格式。
像这种类型的嵌套对于你组织和结构化你的css是一种神奇的方法，同时，它还可以减少没有必要的代码重复。
混合是另一种让人着迷的Sass特性。
混合能够使你重用一整段Sass代码，你甚至能够给他们传递参数，同时，你还能够确定默认的值，这也是十分酷的！
定义一个混合，需要用到@mixin关键字，后面跟上你为混合选择的名字。如果你需要一些参数，在名字后面，添加一对括号，并在括号中定义你的参数变量。如果你需要默认值，可以再参数后面添加冒号和你想要的默认值。
使用混合是容易的，通过调用@includSass关键字，后面跟着混合名和用括号包含的参数值。
下面是例子：
@mixin&border-radius($amount:&5px) &&&-moz-border-radius:&$amount &&&-webkit-border-radius:&$amount &&&border-radius:&$amount &&h1&&&@include&border-radius(2px) &&.speaker &&&@include&border-radius&
上面的Sass将会编译生成如下的css:
h1&{ &&&-moz-border-radius:&2px; &&&-webkit-border-radius:&2px; &&&border-radius:&2x;&} &&.speaker&{ &&&-moz-border-radius:&5px; &&&-webkit-border-radius:&5px; &&&border-radius:&5px;&}&
在以上例子中，我们给h1中的radius中设定了值，而.speakr中，因为没有设定值，所以radius中的值为默认值。
We specified the radius inh1, but for the.speakerwe didn&t specify anything, therefore the default of5pxis used.
选择器继承
选择器继承能够让你实现选择器可以继承其他选择器中的所有样式，这也是让人欲罢不能的！
为了能够实现它，需要使用@extend关键字，后面跟着你想要继承的选择器，这样，想要继承的选择器中的样式都会在被继承选择器中实现。
h1&&&border:&4px&solid&#ff9aa9&&.speaker &&&@extend&h1&&&border-width:&2px&
上面的将会编译为如下的css
h1,&.speaker&{ &&&border:&4px&solid&#ff9aa9;&} &&.speaker&{ &&&border-width:&2px;&}&
尝试一下sass
通过在线的方式尝试一下
你能体验Sass通过，不需要将Sass安装在你本地电脑。
在编译以前，你需要选择底部的缩进语法。
Sass是一个Ruby gem，假如以前你的机子中装有Ruby gem，很容易在机子中安装Sass。
Sass 能被用作为一个命令行工具，将你的Sass文件编译成css文件。
你能做这个通过定义Sass类型&&监控
sass_文件夹：样式列表_文件夹中包含着sass文件夹和样式列表文件夹，sass文件夹中包含的sass文件后缀名必须为.sass，样式列表文件夹中包含的是你的输出文件夹。监控选项的选择意味着如果你对文件作任何改变，一旦你保存他们，文件将会自动转变。
将css转变为Sass
你开始在现有的项目中使用Sass通过使用sass转化。
进入你的电脑，打开你想要转化的文件夹，选择-convert-from-css-to sass.-R意味着递归，.意味着当前的目录。
关于Sassy（SCSS）的说明
在这篇文章中，我仅仅使用了Sass的缩进语法，然而，还有一种更新的格式叫SCSS，它和Sass的不同是它看起来更像你以前用的css，但是，它却拥有类似Sass的特征，如变量，混合，嵌套和选择器继承。
Sass在保持你的样式表有好的结构和不会让你重复方面真的很神奇，其中不乏一些大的项目 如都使用混合来引入自己的css框架而不是在html中使用混乱的各种类。
所以，不要犹豫了，在下一个项目中，赶紧尝试一下sass的魅力吧！
英文原文：
原文链接：【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
原创原创原创热点头条
24H热文一周话题本月最赞
讲师：91672人学习过
讲师：305251人学习过
讲师：171395人学习过
精选博文论坛热帖下载排行
本书着重介绍标准C++语言，即1998年由ISO正式推出的关于C++的国际性标准版本。
本书从最基础的编程语言概念讲起，共分6篇24章。前4篇完整...
订阅51CTO邮刊}