函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

//scss$baseFontSize:10px!default;$gray:#ccc!default;//pixelstorems@functionpxToRem($px){@return$px/$baseFontSize*1rem;}body{font-size:$baseFontSize;color:lighten($gray,10%);}.test{font-size:pxToRem(16px);color:darken($gray,10%);}//cssbody{font-size:10px;color:#e6e6e6;}.test{font-size:1.6rem;color:#b3b3b3;}

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

//scss$baseFontSize:14px!default;$baseLineHeight:1.5!default;$baseGap:$baseFontSize*$baseLineHeight!default;$halfBaseGap:$baseGap/2!default;$samllFontSize:$baseFontSize-2px!default;//grid$_columns:12!default;//Totalnumberofcolumns$_column-width:60px!default;//Widthofasinglecolumn$_gutter:20px!default;//Widthofthegutter$_gridsystem-width:$_columns*($_column-width+$_gutter);//gridsystemwidth

条件判断及循环

@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

//scss$lte7:true;$type:monster;.ib{display:inline-block;@if$lte7{*display:inline;*zoom:1;}}p{@if$type==ocean{color:blue;}@elseif$type==matador{color:red;}@elseif$type==monster{color:green;}@else{color:black;}}//css.ib{display:inline-block;*display:inline;*zoom:1;}p{color:green;}

三目判断

语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true,1px,2px)=>1pxif(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这个数。

//scss@for$ifrom1through3{.item-#{$i}{width:2em*$i;}}//css.item-1{width:2em;}.item-2{width:4em;}.item-3{width:6em;}

@each循环

语法为：@each $var in <list or map>

其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

单个字段list数据循环

//scss$animal-list:puma,sea-slug,egret,salamander;@each$animalin$animal-list{.#{$animal}-icon{background-p_w_picpath:url('/p_w_picpaths/#{$animal}.png');}}//css.puma-icon{background-p_w_picpath:url("/p_w_picpaths/puma.png");}.sea-slug-icon{background-p_w_picpath:url("/p_w_picpaths/sea-slug.png");}.egret-icon{background-p_w_picpath:url("/p_w_picpaths/egret.png");}.salamander-icon{background-p_w_picpath:url("/p_w_picpaths/salamander.png");}

多个字段list数据循环

//scss$animal-data:(puma,black,default),(sea-slug,blue,pointer),(egret,white,move);@each$animal,$color,$cursorin$animal-data{.#{$animal}-icon{background-p_w_picpath:url('/p_w_picpaths/#{$animal}.png');border:2pxsolid$color;cursor:$cursor;}}//css.puma-icon{background-p_w_picpath:url("/p_w_picpaths/puma.png");border:2pxsolidblack;cursor:default;}.sea-slug-icon{background-p_w_picpath:url("/p_w_picpaths/sea-slug.png");border:2pxsolidblue;cursor:pointer;}.egret-icon{background-p_w_picpath:url("/p_w_picpaths/egret.png");border:2pxsolidwhite;cursor:move;}

多个字段map数据循环

//scss$headings:(h2:2em,h3:1.5em,h4:1.2em);@each$header,$sizein$headings{#{$header}{font-size:$size;}}//cssh2{font-size:2em;}h3{font-size:1.5em;}h4{font-size:1.2em;}

后续详情学习，可参照大漠老师的博客

http://www.w3cplus.com/sassguide/syntax.html