2016-11-07 60 views
0

我在SASS中有一個自定義mixin來生成表格,它只需要一些參數來生成顏色和細節。這是開始:SASS顏色參數始終爲空

@mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) { 
    @debug "Background: #{$background}"; 
    @debug "Foreground: #{$foreground}"; 
    $background-hover: hover($background) !default; 
    $foreground-hover: hover($foreground) !default; 

的問題是,我總是用我的懸停色功能的錯誤顏色是NULL,即使我通過正常的值給它(用於調試,看看是否含有東西或不)。這是函數:

@function hover($color, $ratio: 15%) { 
    @if (lightness($color) > 50%) { 
    @return darken($color, $ratio); 
    } @else { 
    @return lighten($color, $ratio); 
    } 
} 

它給我這個錯誤:錯誤:$顏色:null不是'輕這沒有任何意義可言的顏色。

現在,正如我在嘗試的東西,我認爲,當我直接將值傳遞給函數(在mixin中)它的工作。那麼,發生了什麼事情?我能做些什麼來解決這個問題?

編輯:我如何調用混入:

table { 
    @include generate-table($background: #FFF, $foreground: #000); 

我也用顏色像這樣的字符串嘗試:

table { 
    @include generate-table($background: '#FFF', $foreground: '#000'); 

當然沒有直接assiciation像全髖關節置換,以及:

table { 
    @include generate-table(#FFF, #000); 

哪一個都有相同的結果。

+0

可以添加亮度的代碼,變暗混入過多和地方是U調用此生成表 – Geeky

+0

新增如何我調用generate-table並且函數lightness,darken和light是sass的基本函數,請參閱:http://sass-lang.com/documentation/Sass/Script/Functions.html – PreFiXAUT

回答

2

改變這些語句,它應該工作

@function hover($color, $ratio: 15%) { 

    @if (lightness($color) > 50%) { 
    @return darken($color, $ratio); 
    } @else { 
    @return lighten($color, $ratio); 
    } 
} 

@mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) { 
    $background-hover:hover($color:$background)!default; 
    $foreground-hover:hover($color:$foreground) !default; 
} 

table{ 
    @include generate-table($background:#FFFFFF, $foreground:#000000); 
} 

希望這有助於

+0

由於某些原因,通過名稱設置參數($ color:$ var)解決了它。不知道爲什麼,但謝謝分配:) – PreFiXAUT