Bourbon size() mixin 中的变量

Question

我最近开始使用 Bourbon 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 时我没有收到任何错误，而是样式表中缺少宽度和高度属性。我可以确认使用像这样的字符串值：@include size(350px 200px); 确实有效，我只是无法让变量与这个 mixin 一起玩得很好。有什么想法吗？

更新：虽然我仍然无法让波旁威士忌大小混合使用变量，但我仍然可以使用我之前使用的自定义大小，只要它是在将波旁威士忌包含在我的项目。作为参考，这是我使用的 size mixin，适用于我曾经扔过的所有东西；

@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 库的代码中，您可以找到“size” mixin 的以下代码：

@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

这就是为什么你必须总是传入诸如“350px”、“250px”之类的mixin值

你可以尝试使用下面的"size" mixin%

@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;
    }
  }
}