波旁威士忌中的变量size() mixin

Question

我最近开始使用Bourbon SASS插件的更新版本。我以前使用自定义mixin使用以下语法设置width和height;

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

假设px为测量单位。然而，随着Bourbon的更新版本，它有自己的size()混合，这并不完全相同的工作。

我不知道如何使用宽度和高度属性的变量。我尝试了以下方法，但无济于事;

@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玩得很好。什么好主意吗?

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

在new 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

这就是为什么你必须总是传入mixin值，如"350px"， "250px"

你可以尝试使用下面的"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;
    }
  }
}