函數(shù)
sass定義了很多函數(shù)可供使用，當(dāng)然你也可以自己定義函數(shù)，以@fuction開(kāi)始。sass的官方函數(shù)鏈接為：sass fuction，實(shí)際項(xiàng)目中我們使用最多的應(yīng)該是顏色函數(shù)，而顏色函數(shù)中又以lighten減淡和darken加深為最，其調(diào)用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個(gè)參數(shù)都是顏色值，第二個(gè)參數(shù)都是百分比。
重慶分公司
重慶分公司
//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;
}運(yùn)算
sass具有運(yùn)算的特性，可以對(duì)數(shù)值型的Value(如：數(shù)字、顏色、變量等)進(jìn)行加減乘除四則運(yùn)算。請(qǐng)注意運(yùn)算符前后請(qǐng)留一個(gè)空格，不然會(huì)出錯(cuò)。
//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
條件判斷及循環(huán)
@if判斷
@if可一個(gè)條件單獨(dú)使用，也可以和@else結(jié)合多條件使用
//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;
}三目判斷
語(yǔ)法為：if($condition, $if_true, $if_false) 。三個(gè)參數(shù)分別表示：條件，條件為真的值，條件為假的值。
if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px
for循環(huán)
for循環(huán)有兩種形式，分別為：@for $var from
$i表示變量，start表示起始值，end表示結(jié)束值，
這兩個(gè)的區(qū)別是關(guān)鍵字through表示包括end這個(gè)數(shù)，而to則不包括end這個(gè)數(shù)。
//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循環(huán)
語(yǔ)法為：@each $var in
其中$var表示變量，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)。sass 3.3.0新加入了多字段循環(huán)和map數(shù)據(jù)循環(huán)。
單個(gè)字段list數(shù)據(jù)循環(huán)
//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");
}多個(gè)字段list數(shù)據(jù)循環(huán)
//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;
}多個(gè)字段map數(shù)據(jù)循環(huán)
//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;
}后續(xù)詳情學(xué)習(xí)，可參照大漠老師的博客
http://www.w3cplus.com/sassguide/syntax.html
創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買多久送多久。
