函數

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:?(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

轉載于:https://blog.51cto.com/dapengtalk/1871533

總結

以上是生活随笔為你收集整理的Sass学习笔记 -- 初步了解函数、运算、条件判断及循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。