波旁大小變量（）mixin

Question

我最近開始使用波旁SASS插件的更新版本。我以前使用過下面的語法來使用一個自定義的mixin來設置width和height;

$width: 350; 
$height: 200; 

.wrapper { 
    @include size($width $height); 
} 

這會假設爲px作爲度量單位。然而，隨着波旁的更新版本，它擁有自己的size() mixin，它的工作方式並不相同。

我無法弄清楚如何使用寬度和高度屬性的變量。我嘗試過以下方法無濟於事;

@include size(#{$width}px #{$height}px); - 插值似乎不直接在mixin中工作。我試着做一個類似的事情，做一個新的變量，最後有單位。

$width: 350; 
$height: 200; 

$width_str: #{$width}px; 
$height_str: #{$height}px; 

.wrapper { 
    @include size($width_str $height_str); 
} 

最後，我嘗試設置變量，像這樣的，因爲我已經在其他地方使用類似的語法（雖然不是一個mixin）;

$width_str: ($width) + px; 
$height_str: ($height) + px; 

編譯SCSS時，我沒有得到任何錯誤，而不是寬度和heigth屬性是剛剛從樣式表丟失。我可以確認使用如下字符串值：@include size(350px 200px);確實有效，我只是無法使用變量來與此mixin配合使用。有任何想法嗎？

UPDATE：雖然我還是不能讓波旁大小混入與變量的工作，我仍然可以使用自定義一個我一直在使用以前，只要是真實，包括我的項目波旁之後定義。作爲參考，這是我使用的大小混合，與我曾經投擲過的所有東西一起工作;

@mixin size($size) { 
    @if length($size) == 1 { 
     @if $size == auto { 
      width: $size; 
      height: $size; 
     } 

     @else if unitless($size) { 
      width: $size + px; 
      height: $size + px; 
     } 

     @else if not(unitless($size)) { 
      width: $size; 
      height: $size; 
     } 
    } 

    // Width x Height 
    @if length($size) == 2 { 
     $width: nth($size, 1); 
     $height: nth($size, 2); 

     @if $width == auto { 
      width: $width; 
     } 
     @else if not(unitless($width)) { 
      width: $width; 
     } 
     @else if unitless($width) { 
      width: $width + px; 
     } 

     @if $height == auto { 
      height: $height; 
     } 
     @else if not(unitless($height)) { 
      height: $height; 
     } 
     @else if unitless($height) { 
      height: $height + px; 
     } 
    } 
} 

Answer 1

在新Bourbone庫，你可以找到下面的代碼爲「大小」混入的代碼：

@if $height == auto or (type-of($height) == number and not unitless($height)) { 
    height: $height; 
} 

@if $width == auto or (type-of($width) == number and not unitless($width)) { 
    width: $width; 
} 

的主要問題是關於返回「無單位」的功能：

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

這就是爲什麼你必須經常進入mixin值，如「350px」，「250px」

你c嘗試使用以下「大小」混合％

@mixin size($size) { 
    $height: nth($size, 1); 
    $width: $height; 

    @if length($size) > 1 { 
    $height: nth($size, 2); 
    } 

    @if $height == auto or type-of($height) == number { 
    @if unitless($height){ 
     height: ($height) + px; 
    } @else { 
     height: $height; 
    } 
    } 

    @if $width == auto or type-of($width) == number { 
    @if unitless($width){ 
     height: ($width) + px; 
    } @else { 
     height: $width; 
    } 
    } 
}