波旁大小变量（）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; 
    } 
    } 
}