0

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

$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;
        }
    }
}
4

1 回答 1

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;
    }
  }
}
于 2014-06-19T23:28:06.480 回答