Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

函数

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

//scss $baseFontSize:      10px !default; $gray:              #ccc !default;         // pixels to rems  @function pxToRem($px) {   @return $px / $baseFontSize * 1rem; } body{   font-size:$baseFontSize;   color:lighten($gray,10%); } .test{   font-size:pxToRem(16px);   color:darken($gray,10%); } //css body {   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;      // Total number of columns $_column-width:                60px !default;   // Width of a single column $_gutter:                      20px !default;     // Width of the gutter $_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

条件判断及循环

@if判断

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

//scss $lte7: true; $type: monster; .ib{     display:inline-block;     @if $lte7 {         *display:inline;         *zoom:1;     } } p {   @if $type == ocean {     color: blue;   } @else if $type == matador {     color: red;   } @else if $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) => 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这个数。

//scss @for $i from 1 through 3 {   .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 $animal in $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, $cursor in $animal-data {   .#{$animal}-icon {     background-p_w_picpath: url('/p_w_picpaths/#{$animal}.png');     border: 2px solid $color;     cursor: $cursor;   } } //css .puma-icon {   background-p_w_picpath: url("/p_w_picpaths/puma.png");   border: 2px solid black;   cursor: default; } .sea-slug-icon {   background-p_w_picpath: url("/p_w_picpaths/sea-slug.png");   border: 2px solid blue;   cursor: pointer; } .egret-icon {   background-p_w_picpath: url("/p_w_picpaths/egret.png");   border: 2px solid white;   cursor: move; }

多个字段map数据循环

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

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

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