Question

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

$width: 350;
$height: 200;

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

这将假设px作为度量单位。然而，对于Bourbon的更新版本，它有自己的size() mixin，它的功能完全不同。

我无法弄清楚如何将变量用于width和height属性。我试过以下无济于事;

@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一起玩得很好。有什么想法吗？

更新：虽然我仍然无法使用波旁大小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库的代码中，您可以找到＆＃34; size＆＃34;的以下代码。混入：

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

主要问题是＆＃34;无单元＆＃34;返回的函数：

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

这就是为什么你必须总是传入mixin值，例如＆＃34; 350px＆＃34;，＆＃34; 250px＆＃34;

您可以尝试使用以下＆＃34;尺寸＆＃34;混入％

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

波旁大小的变量（）mixin

1 个答案: