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