Sass學習筆記–初步瞭解函式、運算、條件判斷及迴圈

技術小牛人發表於2017-11-21
筆記函式

函式

sass定義了很多函式可供使用，當然你也可以自己定義函式，以@fuction開始。sass的官方函式連結為：sass fuction，實際專案中我們使用最多的應該是顏色函式，而顏色函式中又以lighten減淡和darken加深為最，其呼叫方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個引數都是顏色值，第二個引數都是百分比。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//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(如：數字、顏色、變數等)進行加減乘除四則運算。請注意運算子前後請留一個空格，不然會出錯。

1
2
3
4
5
6
7
8
9
10
11
12
//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結合多條件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//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) 。三個引數分別表示：條件，條件為真的值，條件為假的值。

1
2
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這個數。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//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資料迴圈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//scss
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url(`/images/#{$animal}.png`);
  }
}
 
//css
.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資料迴圈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//scss
$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 $color;
    cursor: $cursor;
  }
}
 
//css
.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資料迴圈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//scss
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
 
//css
h1 {
  font-size: 2em;
}
 
h2 {
  font-size: 1.5em;
}
 
h3 {
  font-size: 1.2em;
}


後續詳情學習，可參照大漠老師的部落格

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

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1871533


相關文章