CODEWITHSUNDEEP
cssvariablessassbourbon
Novocaine
Novocaine

Reputation: 4786

Variables in Bourbon size() mixin

I've recently started using an updated version of the Bourbon SASS plugin. I've previously used a custom mixin to set the width and height using the following syntax;

$width: 350;
$height: 200;

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

This would assume px as the unit of measurement. However with the updated version of Bourbon, it has it's own size() mixin which doesn't work quite the same.

I cannot figure out how to use variables for the width and height properties. I've tried the following to no avail;

@include size(#{$width}px #{$height}px); - interpolation doesn't appear to work directly in the mixin. I tried doing something similar by making a new variable that had the unit on the end.

$width: 350;
$height: 200;

$width_str: #{$width}px;
$height_str: #{$height}px;

.wrapper {
    @include size($width_str $height_str);
}

Finally, I tried setting the variables like this as I've used similar syntax elsewhere (albeit not for a mixin);

$width_str: ($width) + px;
$height_str: ($height) + px;

I don't get any errors when compiling the SCSS, instead the width and heigth properties are just missing from the stylesheet. I can confirm that using string values like so: @include size(350px 200px); does work, I just cannot get variables to play nice with this mixin. Any ideas?

UPDATE: While I still can't get the bourbon size mixin to work with variables, I can still use the custom one I was using previously, as long as that's defined after including bourbon in my project. For reference, this is the size mixin I use, works with everything I've ever thrown at it;

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

Upvotes: 1

Views: 1316

Answers (1)

Slawa Eremin
Slawa Eremin

Reputation: 5415

In the code of new Bourbone library you can find the following code for the "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;
}

The main problem is about "unitless" function that returns:

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

that's why you have to always pass into the mixin values such as "350px", "250px"

You can try to use the following "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;
    }
  }
}

Upvotes: 1

Related Questions