css - Variables in Bourbon size() mixin -

css - Variables in Bourbon size() mixin -

i've started using updated version of bourbon sass plugin. i've used custom mixin set width , height using next syntax;

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

this assume px unit of measurement. updated version of bourbon, has it's own size() mixin doesn't work quite same.

i cannot figure out how utilize variables width , height properties. i've tried next no avail;

@include size(#{$width}px #{$height}px); - interpolation doesn't appear work straight in mixin. tried doing similar making new variable had unit on end.

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

finally, tried setting variables i've used similar syntax elsewhere (albeit not mixin);

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

i don't errors when compiling scss, instead width , heigth properties missing stylesheet. can confirm using string values so: @include size(350px 200px); work, cannot variables play nice mixin. ideas?

update: while still can't bourbon size mixin work variables, can still utilize custom 1 using previously, long that's defined after including bourbon in project. reference, size mixin use, works i've ever thrown @ 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; } } }

in code of new bourbone library can find next code "size" mixin:

@if $height == auto or (type-of($height) == number , not unitless($height)) { height: $height; } @if $width == auto or (type-of($width) == number , not unitless($width)) { width: $width; }

the main problem "unitless" function returns:

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

that's why have pass mixin values such "350px", "250px"

you can seek utilize next "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; } } }

css variables sass bourbon