首页 > 代码库 > Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

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-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数据循环

//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数据循环

//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


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