sass揭祕之@mixin，%，@function（轉載）

時間 2019-11-19

標籤 sass 揭祕 mixin function 轉載简体版

原文原文鏈接

由於文章內含有不少sass代碼，如需本身動手查看編譯結果，推薦使用sassmeister這款在線編譯工具，方便你閱讀學習。php

在閱讀本文章以前，請先確認你已經閱讀了上篇文章sass揭祕之變量，否則會給你帶來疑惑的感受。css

其實不少人之因此對sass或less感興趣，就是由於他們能使用變量和這個@mixin功能，然後面的%和@function知道的人就比較少了。因此說@mixin這個東西仍是頗有誘惑力的，沒辦法，廣告作得好啊，大明星。這裏之因此把%和@function和@mixin放在一塊兒，固然並不是平白無故，一看@mixin和@function就是兄弟，長得那麼像，而%這個後起之秀，更是在必定程度上搶了@mixin的很多風頭。html

這裏先說@mixin和%，誰讓它們有競爭關係呢，哈哈。@function這個傢伙一看就是函數，先閃一邊去。首先@mixin能夠傳遞參數，而%不行；而後@mixin的調用方式是@include，而%的調用方式是@extend；最後@include產生的樣式是以複製拷貝的方式存在的，而@extend產生的樣式是以組合申明的方式存在的。概念簡單講解完畢，如今進入代碼實例，上戰場纔是真理。java

爲了方面測試，咱們先約定創建一個_mixin.scss文件，下面全部的有關@mixin，%和@function的一些定義所有寫在這裏，再創建一個style.scss來調用咱們的_mixin.scss文件，因此在style的裏面先寫上一句@import 'mixin';jquery

@mixin

先來一段無參數簡單版本的@mixin（@mixin，%，@function所有放在_mixin.scss文件中）：css3

// block得有寬度margin左右爲auto才能居中 @mixin center-block { margin-left: auto; margin-right: auto; }

這應該是最簡單版本的@mixin了，不但沒有參數，連樣式都只有兩條，不過仍是很實用的。接下來咱們來調用下（調用的所有放在style.scss文件中，先導入_mixin文件）：git

@import 'mixin'; #header{ width:1000px; @include center-block; } .gallery{ width:600px; @include center-block; }

解析成的css：github

#header { width: 1000px; margin-left: auto; margin-right: auto; } .gallery { width: 600px; margin-left: auto; margin-right: auto; }

很顯然，上面兩個margin左右爲auto在各自的選擇器中，固然運行是沒有問題的，可是若是把這兩個同樣樣式提出來組合申明下多好啊，一看質量就不同了嗎，高端大氣上檔次了哈哈。這個問題稍後留給咱們的%來解決，咱們繼續@mxixin。web

再來個無參數版的，可是包含瀏覽器兼容方面的：ajax

$lte7:true !default;//是否兼容ie6,7 // inline-block // ie6-7 *display: inline;*zoom:1; @mixin inline-block { display: inline-block; @if $lte7 { *display: inline;*zoom:1; } }

上面的代碼，有個$lte7全局變量，咱們把這個變量提到_mixin.scss文件的最上面。注意這裏@mixin裏面有個@if判斷，這是爲ie6,7對inline-block部分不兼容的一個處理，默認$lte7爲true，意思是須要兼容ie6,7，那麼就會輸出判斷裏面的代碼*display: inline;*zoom:1;，當咱們不須要兼容的時候呢，話說高富帥搞的就是搞ie8+的，那設置$lte7爲false就沒*display: inline;*zoom:1;這兩個傢伙的事了，直接宣佈其斬立決了。代碼爲證：

$lte7:false; @import 'mixin'; .inline-block{ @include inline-block; }

這裏注意：由於咱們要重設$lte7爲false，因此在@import 'mixin';以前先定義下$lte7:false;，這涉及到變量默認值的使用，若是你不瞭解請先查閱sass揭祕之變量

解析成的css：

.inline-block{ display:inline-block; }

固然若是沒有$lte7:false;這個提早申明變量，那麼解析成的css應該是這樣的：

.inline-block{ display:inline-block; *display: inline;*zoom:1; }

從上面能夠看出，若是@mixin裏面放點判斷，對瀏覽器的兼容還能夠作點有意義的事，不用每次都寫一大坨，同時還爲之後升級帶來一個暗門，直接改變下變量的值從新解析下就ok了，那些爲兼容處理的代碼通通消失，這比較爽。測試完這個以後，請把$lte7:false;刪掉，由於後面還要用到其值true。

如今來個參數簡單版的：

@mixin float($float:left) { float: $float; @if $lte7 { display: inline; } }

夠簡單吧，float人人皆知啊。這裏$float參數有默認值爲left，咱們調用下：

.fl{
    @include float; } .fr{ @include float(right); }

解析成的css：

.fl{ float:left; display: inline; } .fr{ float:right; display: inline; }

由於在傳參數的時候$float設置了一個默認值爲left，因此調用的時候@include float;和@include float(left);能產生同樣的代碼。這裏先說下我琢磨出來的一個經驗，若是某個@mixin沒法設置默認的參數，那麼這個@mixin要麼能夠用%來取代，要麼就是個雞肋@mixin，因此請定義@mixin的時候參考這兩點判斷是否有必要，特殊狀況除外。

關於雞肋@mixin等下再說，咱們接着說下多個參數的@mixin：

// 禁用樣式，加!important @mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){ background-color: $bgColor !important; color: $textColor !important; cursor: not-allowed !important; }

兩個參數，一個爲背景色，一個爲文本色，兩個冒號後面的分別爲默認值，直接調用@include diasbled;使用的就是默認值，雖然簡單，咱們仍是調用下吧。

.disabled{
    @include disabled; }

解析後的css：

.disabled { background-color: #e6e6e6 !important; color: #ababab !important; cursor: not-allowed !important; }

接着下一個實例，一個屬性能夠有多個屬性值的，寫到這裏，看過sass揭祕之變量的人就想起來了，原來是傳參的時候變量得加...:

//錯誤定義方法 @mixin box-shadow($shadow){ -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; box-shadow:$shadow; }

爲了給人說明這...，有必要先搞個錯誤的東西，那樣你就會恍然大悟了。咱們來調用下上面的錯誤定義方法：

.shadow1{
    @include box-shadow(0 0 5px rgba(0,0,0,.3));//這個能夠運行 } .shadow2{ @include box-shadow(0 0 5px rgba(0,0,0,.3),inset 0 0 3px rgba(255,255,255,.5));//這個不可運行 }

上面兩個代碼，咱們先運行第一個，會成功解析出css，而第二個就不行了，它就是孫猴子派來搗亂的。

第一個運行解析成的css爲：

.shadow1{ -webkit-box-shadow:0 0 5px rgba(0,0,0,.3); -moz-box-shadow:0 0 5px rgba(0,0,0,.3); box-shadow:0 0 5px rgba(0,0,0,.3); }

爲何第二個不行呢，由於第二個咱們給box-shadow設置了兩個值，一個外陰影一個內陰影，而且是以，分開的。實際狀況是，咱們對box-shadow能夠設置不少個值，隨咱們高興，沒有必定的。這個時候就有了爲css3這些妖孽而生的傳遞的參數後面加...了，上代碼：

//正肯定義方法 @mixin box-shadow($shadow...){ -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; box-shadow:$shadow; }

正確的東西得來老是那麼不容易，話說一開始研究別人代碼的時候，還覺得這...是隨便加上去好玩的呢。而後我寫css3的@mixin的時候把...通通去掉，結果，結果就悲劇了，能夠有多個屬性值的，只能設置一個屬性值，而後就是滿天找bug了。注意這裏只在傳參的時候變量後面添加...，而在大括號內引用的時候是不用加...，接着你能夠回過頭測試下上面那兩個代碼了，保準ok！

看完...這個爲css3而生的以後，咱們再看一個爲css3而成的東西@content，之因此提起來，是由於它也是應用在@mixin裏面的。按常規來講，咱們全部的樣式都是在@mixin裏面定義好的，而後使用的時候@include就拷貝了這段樣式，可是@content改變了這一慣例，它其實沒有定義樣式，它是定義好了選擇器，而後@include的時候，就是選擇器定了，你寫的樣式都放在這個選擇器裏面。光文字介紹是不能解決問題的，仍是實例比較有養分：

@mixin header{ #header{ @content; } }

咱們來簡單調用下：

@include header{ width:1000px; height:200px; .logo{ width:200px; } }

解析後的css：

#header { width: 1000px; height: 200px; } #header .logo { width: 200px; }

看到沒，這個選擇器以#header爲基礎，而後@include header裏面寫的任何樣式，都是在這個基礎上的。明白@content與上面的其餘的區別不，其餘的@mixin調用的時候是這樣的@include mixin-name($var1,$var2,...,$varn)，而這個@content的調用的時候是這樣的@include mixin-name{},大括號裏面就是@content表示的內容，裏面css樣式隨便你寫啊。

固然上面的@content實例是閒得蛋疼的爲簡單說明而寫的，其實沒有什麼使用價值的，@content的使用價值其實體如今css3的media-queries，animation的keyframes定義，還有爲瀏覽器兼容的定義。下面實例說明：

//定義media-queries的最小最大寬度 @mixin screen($res-min, $res-max){ @media screen and ( min-width: $res-min ) and ( max-width: $res-max ){ @content; } } //定義animation的keyframes @mixin keyframes($name){ @keyframes #{$name} { @content; } } //定義全部不支持圓角的瀏覽器使用背景圖片 //得使用[modernizr](http://modernizr.com/)來檢測，在html上加class @mixin no-border-radius{ .no-border-radius{ @content } }

又到調用這步了，沒辦法，不驗證下，產生點css，仍是有點迷惑：

#header{ @include screen(780px,1000px){ color:red; } } @include screen(780px,1000px){ body{ font-size:14px; } } @include keyframes(show){ 0% { opacity:0; } 100% { opacity:1; } } //注意下面這兩個的區別 @include no-border-radius{ .box{ background:url(round-bg.gif) no-repeat; } } .box{ @include no-border-radius{ background:url(round-bg.gif) no-repeat; } }

解析後的css：

@media screen and (min-width: 780px) and (max-width: 1000px) { #header { color: red; } } @media screen and (min-width: 780px) and (max-width: 1000px) { body { font-size: 14px; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } .no-border-radius .box { background: url(round-bg.gif) no-repeat; } .box .no-border-radius { background: url(round-bg.gif) no-repeat; }

上面那個@include screen咱們使用了兩種方法去調用，第一種在選擇器裏面調用，第二種直接調用，二者生成的css是同樣的，既然生成的樣式沒有什麼區別，那如何使用呢？其實第一種方式強調的是以選擇器爲主，當screen是何時是什麼值，而第二種調用方法強調以media-queries條件爲主，能夠方便組織全部在這個條件中的都寫在一塊兒。若是作響應式佈局咱們建議使用第二種方法，以斷點爲主來寫樣式，把某個斷點下的樣式所有寫在一塊兒。

爲了表示media-queries的特殊，咱們舉了個反例，一樣以兩種方法調用@include no-border-radius，結果能夠看到徹底不同啊，你們千萬別覺得是@include no-border-radius錯了，其實它纔是正確的。而media-queries是個爲了你們方便使用的特殊案例。

@mixin說到這裏，其主要的知識點也說完了，相信你們也收穫很多了，爲了表示對@mixin的敬意，我再挑幾個@mixin來分析。

先來個咱們經常使用的用border生成三角形的@mixin:

// triangle @mixin triangle($direction, $size, $borderColor ) { content:""; height: 0; width: 0; @if $direction == top { border-bottom:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == right { border-left:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } @else if $direction == bottom { border-top:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == left { border-right:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } }

這個@mixin主要有三個變量：第一個是方向的，由於三角形根據箭頭朝向有四種方向，咱們對應經常使用的css屬性top,right,bottom,left；第二個表示三角形的大小；第三個表示顏色。固然你能夠挑你經常使用的那個設置爲變量的默認值，那樣調用經常使用的那個就比較簡單了，直接@include triangle;就ok了。

下面咱們再來個關於css3的神來之筆的@mixin，在說這個以前，先說下前面的那個box-shadow的@mixin，咱們裏面的樣式是一條一條寫的，如-webkit-box-shadow:$shadow;-moz-box-shadow:$shadow;box-shadow:$shadow;，這得多山炮啊，一條一條來，不簡潔，不科學。下面歡迎咱們的prefixer這個@mixin，它對css3的前綴定義有畫龍點睛之妙。

//是否支持某個瀏覽器的前綴，若是你不想支持，能夠設置爲false //---------------------------- $prefix-for-webkit: true !default; $prefix-for-mozilla: true !default; $prefix-for-microsoft: true !default; $prefix-for-opera: true !default; $prefix-for-spec: true !default; // 標準版 // prefixer //---------------------------- @mixin prefixer ($property, $value, $prefixes) { @each $prefix in $prefixes { @if $prefix == webkit and $prefix-for-webkit == true { -webkit-#{$property}: $value; } @else if $prefix == moz and $prefix-for-mozilla == true { -moz-#{$property}: $value; } @else if $prefix == ms and $prefix-for-microsoft == true { -ms-#{$property}: $value; } @else if $prefix == o and $prefix-for-opera == true { -o-#{$property}: $value; } @else if $prefix == spec and $prefix-for-spec == true { #{$property}: $value; } @else { @warn "Unrecognized prefix: #{$prefix}"; } } }

看到沒，判斷循環輸出啊，到這裏也許你仍是不明白的，咱們來調用它來構建css3的一些@mixin，你就明白了。

//webki和標準 @mixin box-shadow($shadow...) { @include prefixer(box-shadow, $shadow, webkit spec); } //webkit moz 和標準 @mixin box-sizing($type:border-box) { // border-box | padding-box | content-box @include prefixer(box-sizing, $type, webkit moz spec); } //webkit moz o 和標準 @mixin transform($property...) { @include prefixer(transform, $property, webkit moz o spec); }

如今來分析下上面的那個@mixin prefixer，第一個參數$property是屬性，第二個參數$value是值，第三個參數$prefixes就是咱們須要添加前綴的組合，由於目前來講前綴包括webkit,moz,o,ms，因此它就是這些值再加上一個標準spec的隨意組合。裏面對$prefixes進行循環判斷，根據不一樣的值，爲屬性添加不一樣的前綴，精彩啊。忽然以爲天空一下晴朗多了，爽吧。咱們來調用下：

.box{
    @include box-shadow(0 0 5px rgba(0,0,0,.3)); @include box-sizing; @include transform(scale(2)); }

解析後的css：

.box { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); }

說完神來之筆，最後咱們再來一段我認爲的一個優秀的雞肋@mixin：

//設置寬高，默認爲auto @mixin size($size...) { $size: if(length($size) > 0, $size, auto); $width: nth($size, 1); $height: nth($size, length($size)); @if $width != auto { $width: if(unitless($width), $width + px, $width); } @if $height != auto { $height: if(unitless($height), $height + px, $height); } width: $width; height: $height; }

先說下這裏面涉及到的一些sass知識點：length($var)表示獲取變量的長度，nth($var,index)獲取變量第幾個位置的值，unitless判斷是否無單位，而這段if(unitless($width), $width + px, $width)實際上是個三目判斷，第一個是條件，第二個是條件爲真的時候的值，第三個是條件爲假的時候的值，這裏面總共用了三個三目判斷，哈哈。

其實上面的代碼是很優秀的，條理清晰邏輯性很強，並且裏面經過判斷也有默認值爲auto，可是爲何是雞肋呢，緣由很簡單：第一，樣式就兩條太簡單，按速度來講，用emmet寫絲毫都不遜色於這個，第二，不能變通爲%，組合申明樣式。如咱們上面的center-block雖然也很簡單，但能夠變通爲%申明，提供兩種調用方式，能夠組合申明樣式。其實這個@mixin還少了個單獨設置width:auto或height:auto。

@mixin該休息下了，後面的%板凳都坐穿了，再不讓它上場，它得拂袖而去告老師了。

%

%在這裏不是作單位用的，而是做爲佔位選擇器來用的，什麼是佔位選擇器呢，打個比方說，它就是佔着茅坑不拉屎，可是若是你要拉屎它立刻就給你讓位。這麼噁心的咱們就不說了。簡單來講，就是先定義好一段樣式，可是這個樣式默認是不會解析出來的，等到你經過@extend調用了纔會解析在css文件中，避免了生成冗餘浪費的css代碼。

接上面的那個@mixin center-block，由於它沒有參數，而咱們又想要組合申明，那麼該%登場了：

%center-block { @include center-block; }

下面咱們再來給#header,.gallery調用下：

#header{ width:1000px; @extend %center-block; } .gallery{ width:600px; @extend %center-block; }

解析成的css：

#header, .gallery { margin-left: auto; margin-right: auto; } #header { width: 1000px; } .gallery { width: 600px; }

實現了咱們剛纔說的組合申明的需求，完美！說到這裏請把目光都從@mixin轉到%來，咱們要趁熱打鐵，繼續深刻%，其實剛纔咱們是在@mixin center-block的基礎上定義了一個%center-block，並在裏面調用@extend center-block，那樣其實咱們暴露了兩種方式供選擇調用，你要組合申明就使用@extend %center-block，你想單獨拷貝進你的選擇器就用@include center-block。固然你也能夠以下這樣直接定義%，而不是使用@include來調用一個已經定義好的@mixin，代碼以下：

$lte7:true; %clearfix { @if $lte7 { *zoom: 1; } &:before, &:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } }

clearfix你們熟悉吧，之前每次使用都要在咱們的html結構上加個class.clearfix來調用，如今好了，若是哪一個要調用這個，直接@extend：

.wrap{
    @extend %clearfix; } .row{ @extend %clearfix; }

解析成的css：

.wrap, .row { *zoom: 1; } .wrap:before, .row:before, .wrap:after, .row:after { content: ""; display: table; font: 0/0 a; } .wrap:after, .row:after { clear: both; }

到這裏，可能有人就會說你怎麼不說下用class定義的樣式，也能夠用@extend來調用啊。下面說下這兩個的區別，上代碼：

.fl{ float:left; } %fr{ float:right; }

這段代碼咱們去解析下，獲得的是以下的css：

.fl { float: left; }

咱們能夠看到，class方式申明的.fl原本就是css，確定輸出出來了，而%fr一點樣式都沒有輸出。

如今咱們再用@extend來分別調用下：

#main{ @extend .fl; width:700px; } #aside_second{ @extend %fr; width:300px; }

解析成的css：

.fl, #main { float: left; } #aside_second { float: right; } #main { width: 700px; } #aside_second { width: 300px; }

到這裏咱們發現%定義的比用class定義的確實要勝一籌啊，作到了只有調用才產生樣式，不調用就是個小乖乖，徹底不添麻煩，不顯擺。固然也許還有人會說，那個.fl我能夠對應html結構裏面的fl這個class。若是你這麼說的話，我再給你來段解釋：其實寫sass的時候，咱們須要一些基礎的文件，這些基礎文件包括的範圍可能比較多，不必定每次都能把全部的用上，可是得有這麼一個功能在哪裏，我須要就直接調用，而不是每次都根據本身的實際需求去寫個基礎的東西。這其實跟咱們使用jquery庫的道理是同樣的，也許你用的其實就是它的選擇器功能，而後添加改變些class，或animate個東西，ajax都沒用到，可是ajax這個功能就在哪裏，你會有須要的時候。你若是用class來定義些@extend的東西，不可能每一個項目均可以用到所有，那樣對於這個項目來講用不到的就是多餘的無用代碼了，因此從如今開始，把@extend的東西都用%來定義吧。

好，如今問題又來了，那哪些個人html結構上用了.fl這個class的怎麼辦？這個請在你的具體項目中添加這個class，請看代碼：

.fl{
    @extend %fl; }

哈哈，竟然是直接在具體的項目中調用%就ok了，彆氣得吐血啊，雖然獲得的代碼同樣，可是這兩種是有本質區別的，代碼的好壞就在這裏了。

固然其實%比class的定義優點不僅是在這裏，而是在各類複雜環境中，class的@extend直接會解析出使人髮指的瘋狂代碼哈哈，這也是爲何%被創造的緣由之一吧。若是你想了解這個髮指的狀況，能夠打開理解SASS的嵌套，@extend，%Placeholders和Mixins，而後在裏面搜索「強大的%placeholders」，而後上面一點就是那些糟糕的使人髮指的代碼了。

這裏有幾點須要再次提醒下：

首先%定義的佔位選擇器樣式不能傳遞參數。固然請注意不能傳遞參數，不表明樣式裏面不能使用變量。
而後@extend調用%申明的東西時，必需要把%帶上，@extend %clearfix正確，而@extend clearfix是錯誤的調用。
最後%定義的樣式，若是不調用是不會產生任何樣式的，這也是用%定義樣式比用原先的class方法定義樣式高明的一方面。

爲了表示這「揭祕」的含量，咱們對第一點補充下，再搞一段代碼：

//變量依次爲：字體大小，邊框顏色，focus時邊框顏色，圓角大小 $simpleForm: 12px $gray #52a8ec $baseRadius !default; %simple-form-basic{ border: 1px solid nth($simpleForm,2); padding: 4px; @if not(unitless(nth($simpleForm,4))){ border-radius:nth($simpleForm,4); } &:focus{ outline: 0 none; } } //ie6,7 zoom組合申明 %zoom{ @if $lte7 { *zoom:1; } } //經過先定義@mixin，而後在%調用@mixin來實現傳遞變量 @mixin float($float:left) { float: $float; @if $lte7 { display: inline; } } %float-right{ @include float(right); }

第一段代碼實際上是sassCore裏面爲form元素定義的一些border和radius，%simple-form-basic沒有傳遞參數，可是裏面的樣式照樣能夠引用外面的變量，說明下里面有個比較有意思的判斷，就是當圓角值有單位的時候纔會輸出border-radius，由於寫0的時候咱們是不帶單位的，並且寫0的時候，除非是覆蓋之前的圓角，否則咱們是不想有border-radius:0;這段代碼的。第二個就簡單了，對於ie6,7加個*zoom:1;，這多好，把*zoom:1;放在一塊兒組合申明瞭。第三段代碼其實就是變相的實現傳遞參數，主要就是先定義一個@mixin，在%裏面調用@mixin。

好了，%就這麼說完了，簡單好用。休息下，活動下胳膊和腿，咱們再來到下一個主題@function。

@function

@function與@mixin，%這二者的第一點不一樣在於sass自己就有一些內置的函數，方便咱們調用，如強大的color函數；其次就是它返回的是一個值，而不是一段css樣式代碼什麼的。

sass自己內置函數的地址爲：sass functions

先說第一個問題，@function返回一個值和上面的@mixin，%有什麼不一樣呢？咱們先來用內置的darken函數作個例子：

//若是在scss裏直接這樣寫錯誤的 darken($f00,50%);

由於它返回的是一個值，而值只有放在變量或做爲屬性值，來段正確的：

//做爲變量值 $redDark:darken($f00,50%) !default; //做爲屬性值 p{ color:darken($f00,70%); }

這下大概能明白吧，做爲新手實際上是很容易犯上面的那個錯誤的。

下面咱們介紹幾個經常使用的內置函數，按照官網上面地址上的順序來。

rgba

分爲兩種：rgba($red, $green, $blue, $alpha)和rgba($color, $alpha)。

第一種跟css3同樣，不介紹，第二種對咱們有點用，實例：

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

ie-hex-str

ie-hex-str($color)

這個函數將一個顏色格式化成ie濾鏡使用，在作css3使用濾鏡兼容的時候用得上，實例：

ie-hex-str(#abc) => #FFAABBCC ie-hex-str(#3322BB) => #FF3322BB ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00

darken

darken($color,$amount)

第一個參數是顏色，第二參數是百分數介於0%-100%，表示將某個顏色變暗多少個百分比。

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%) darken(#800, 20%) => #200

lighten

lighten($color,$amount)

第一個參數是顏色，第二參數是百分數介於0%-100%，表示將某個顏色變亮多少個百分比。

lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30) lighten(#800, 20%) => #e00

percentage

percentage($value)

將一個沒有單位的數字轉成百分比形式

percentage(0.2) => 20% percentage(100px / 50px) => 200%

length

length($list)

返回一個列表的長度

length(10px) => 1 length(#514721 #FFF6BF #FFD324) => 3

nth

nth($list, $n);

返回列表裏面第n個位置的值

nth(10px 20px 30px, 1) => 10px nth((Helvetica, Arial, sans-serif), 3) => sans-serif

unit

unit($number)

獲得這個數的單位

unit(100) => "" unit(100px) => "px" unit(3em) => "em" unit(10px * 5em) => "em*px" unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

unitless

unitless($number)

返回這個數是否沒有單位

unitless(100) => true unitless(100px) => false

三目判斷

if($condition, $if-true, $if-false)

第一個表示條件，第二個表示條件爲真的值，第三個表示爲假的值

if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px

可能上面的都提不起你的興趣，一時記不住也沒有關係，大概有個印象，用的時候知道sass能夠提供這個函數功能，或者不清楚再去查下它的官方函數。再次提醒剛開始sass的話，注意函數是返回一個值，不能直接放到sass裏面直接去運行的，會報錯。你能夠把這些用在判斷或者屬性值裏面，那麼就是一級棒。

下面咱們來搞點本身定義的函數吧，先來個簡單的：

// px轉em @function pxToEm($px, $base: 16) { @return ($px / $base) * 1em; }

調用下：

p{ font-size:pxToEm(20); }

解析後的css：

p { font-size: 1.25em; }

估計這點小羅羅，是上不了大場面的，@mixin都有一個那麼神來之筆，@function怎能沒有呢，下面介紹網格佈局的一個計算寬度的神來之筆，來自blankwork。

//960網格佈局 $_columns: 12 !default; // 總列數 $_column-width: 60px !default; // 單列寬 $_gutter: 20px !default; // 間隔 @function get_width($columns:$_columns, $onlyInnerWidth: true, $_subtract:0){ // 默認返回值 $return: ($_column-width + $_gutter) * $columns - $_subtract !default; @if $onlyInnerWidth == true{ //若是$onlyInnerWidth爲true，那麼減掉一個間隔$_gutter $return: ($_column-width + $_gutter) * $columns - $_gutter - $_subtract; } @return $return; }

首先，你得對960的網格系統比較熟悉，否則你可能有點迷惑。若是你不瞭解960網格系統，建議你先在w3cplus裏面找找。固然也許你尚未感覺它的神來之筆，別急，先來調用下：

#container{ width:get_width(12,false);//960px } .col-four{ @extend %clearfix; .col{ @include float; margin:0 $_gutter / 2; width:get_width(3); //220px h2{ padding-left:10px width:get_width(3,true,10px); //210px } } }

看到沒，向那些.span1,.span2,..., .span12說88，想要幾個格子就傳遞數字幾，固然還有些特別需求，要不了恰好的網格，比喻比4個格子要少30px，看到上面的get_width的第三個參數不，專門負責搞定這些額外需求的，get_width(4,true,30px)獲得的就是270px。

因此說這個計算寬度有三種調用形式：第一種默認的如get_width(3)獲得220px；第二種不須要左右margin的如get_width(3，false)獲得240px；第三種能夠靈活縮小點寬度如get_width(3,true,10px)獲得210px。

固然計算寬度只是第一步，還有設置column的浮動，而後wrap的閉合子元素的浮動等，都是基於這個函數，一個網格系統就在這個基礎上構建成功，它的這個功能應該能夠和css3的那個prefixer的@mixin媲美吧。

最後說一下，其實到最後全部的的@mixin，%，@function都是爲解析後的css樣式服務的，若是你不能帶來如下這些優點那麼能夠考慮不要定義這個東西：