CODEWITHSUNDEEP
sasszurb-foundationmixins
Mere Development
Mere Development

Reputation: 2529

Setting padding on Zurb Foundation's Button mixin

I'm trying to use Foundation's Button Mixin. The format example from the docs is this:

// Using the available options
.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

So I'm using it like so:

@include button(rem-calc(10 5), $colour-main-orange, em-calc(5 0), false, false, false);

But passing rem-calc(10 5) as the padding is failing. Compass fails to compile the SCSS with error: Undefined operation: "0.625rem 0.3125rem times 2"

If I pass just rem-calc(10) it works. In most other areas around Foundation, multiple values can be passed in this way. For example see the way I'm passing radius values of top-left and bottom-right = 5 and top-right and bottom-left = 0.

Can anyone think of a way around this? It might be a mixin bug, but before I try and work out how to fix it I want to make sure it's not just me being stupid!

Upvotes: 0

Views: 2162

Answers (2)

Alex Guerrero
Alex Guerrero

Reputation: 2159

As @Parhum says you can't use a list as a $padding argument for this mixin so I have modified one of my mixins to add lists support to button mixin. Button mixin imports button-size mixin to deal with button padding so you need to edit button-size mixin to add support to use lists as arguments for $padding.

Here is my mixin

How it works
With this mixin you can set $padding as a value, a list with a single value or a list with 2, 3 or 4 values, this list follows the css rule for padding shorthand:

  • One single value applies to all 4 sides
  • Two values apply to 1. top and bottom and 2. to the left and right side
  • Three values apply to 1. top, 2. right and left and 3. to the bottom side
  • Four values apply to 1. top, 2. right, 3. bottom and 4. to the left side

So @include button-size($padding: value) returns:

padding-top: value
padding-right: value * 2
padding-bottom: value + rem-calc(1)
padding-left: value * 2

@include button-size($padding: value1 value2) returns:

padding-top: value1
padding-right: value2 * 2
padding-bottom: value1 + rem-calc(1)
padding-left: value2 * 2

@include button-size($padding: value1 value2 value3) returns:

padding-top: value1
padding-right: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value2 * 2

@include button-size($padding: value1 value2 value3) returns:

padding-top: value1
padding-rigth: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value4 * 2

Proportion
I've added another argument to box-size mixin called $proportion, it's set to true by default and if you set it to a true value it removes padding operations.

So @include button-size($padding: value1 value2 value3 value4, $proportion: ) returns:

padding-top: value1
padding-rigth: value2
padding-bottom: value3
padding-left: value4

instead of:

padding-top: value1
padding-right: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value4 * 2

How to include this mixin in foundation

  1. Open fundation/components/_buttons.scss with your favourite editor and replace @mixin button-size by this mixin

  2. Add $proportion:false into @mixin button arguments and into @include button-size arguments

Upvotes: 3

Parhum
Parhum

Reputation: 770

The problem is that you are trying to set $padding argument as a list with two values, @mixin button takes this list and tries to operate with it but returns an error because sass doesn't support list operations . From Sass Reference:

Lists don’t support any special operations. Instead, they’re manipulated using the list functions.

Foundation use this code to set $padding that you send to them. Look at this code:

padding-top: $padding;
padding-#{$opposite-direction}: $padding * 2; // $padding list and * operator returns an error
padding-bottom: $padding + rem-calc(1); // This also return an error
padding-#{$default-float}: $padding * 2; // This also return an error

Upvotes: 2

Related Questions