Menu icon Foundation
nested mixins for the buttons.scss isn't very nice to work with

The code below is not very flexible to work with... There are many things in the base and button-size that I would like to adjust but really have no way to do that... especially not in a mixin way. For example what is the purpose of nested the mixins?... is there a way to adjust the values of the other mixin such as bottom margin in the button-base mixin?

for now I am just redoing it and trying to fix it so it is more amendable to my needs.

I'll let you know what I come up with.

@mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
  @include button-base;
  @include button-size($padding, $full-width);
  @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);

  @if $transition {
    @include single-transition(background-color);
  }
}     

         

scssSassmixinmixinsFoundationzurb

The code below is not very flexible to work with... There are many things in the base and button-size that I would like to adjust but really have no way to do that... especially not in a mixin way. For example what is the purpose of nested the mixins?... is there a way to adjust the values of the other mixin such as bottom margin in the button-base mixin?

for now I am just redoing it and trying to fix it so it is more amendable to my needs.

I'll let you know what I come up with.

@mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
  @include button-base;
  @include button-size($padding, $full-width);
  @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);

  @if $transition {
    @include single-transition(background-color);
  }
}     

         
Christian Matthias over 4 years ago

Yea my preliminary observation is that I don't like that concept at all. nested mixins

Christian Matthias over 4 years ago

So below I figured out that when the mixin's are nested they can pass through their values as well to be used by the main mixin which is button. I took that concept and added some more variables to the things I wish were variables so set and change them as I see fit.

for example the margin-bottom I set to if true then set a value... I can change this on the fly via the mixin as well.

next I added an if true add a box shadow to the button to give that 3d effect.

  1. thing I wish is that the padding and font weren't tied together per se. For using the button without a mixin I see why this was done.

  2. thing I wish is that I could configure the settings I added so that I would be able to them via the &class directive for doing things like button-custom small radius etc. I think I should be able to do this. I will take a look at it tomorrow. However, with that said, if you want a button with a different color you are creating a mixin so perhaps this is just the best way to do it.

What are your thoughts.

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

//
// @variables
//
$include-html-button-classes2: $include-html-classes !default;

// We use these to build padding for buttons.
$button-tny: rem-calc(10) !default;
$button-sml2: rem-calc(12) !default;
$button-med: rem-calc(16) !default;
$button-lrg: rem-calc(18) !default;
$button-left-right-padding-var: 1.9 !default;

// We use this to control the display property.
$button-display: inline-block !default;
$button-margin-bottom2: rem-calc(20) !default;

// We use these to control button text styles.
$button-font-family: $body-font-family !default;
$button-font-color: $white !default;
$button-font-color-alt: $oil !default;
$button-font-tny: rem-calc(11) !default;
$button-font-sml2: rem-calc(14) !default;
$button-font-med: rem-calc(16) !default;
$button-font-lrg: rem-calc(20) !default;
$button-font-weight: $font-weight-normal !default;
$button-font-align: center !default;

// We use these to control various hover effects.
$button-function-factor: -20% !default;

// We use these to control button border styles.
$button-border-width: 0px !default;
$button-border-style: solid !default;
$button-bg-color: $primary-color !default;
$button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
$button-border-color: $button-bg-hover !default;
$secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
$secondary-button-border-color: $secondary-button-bg-hover !default;
$success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
$success-button-border-color: $success-button-bg-hover !default;
$alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
$alert-button-border-color: $alert-button-bg-hover !default;
$warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default;
$warning-button-border-color: $warning-button-bg-hover !default;
$info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
$info-button-border-color: $info-button-bg-hover !default;

// We use this to set the default radius used throughout the core.
$button-radius: $global-radius !default;
$button-round: $global-rounded !default;

// We use this to set default opacity and cursor for disabled buttons.
$button-disabled-opacity: 0.7 !default;
$button-disabled-cursor: $cursor-default-value !default;


//
// @MIXIN
//
// We use this mixin to create a default button base.
//
// $style - Sets base styles. Can be set to false. Default: true.
// $display - Used to control display property. Default: $button-display || inline-block

@mixin button-base2($style:true, $display:$button-display) {
  @if $style {
    border-style: $button-border-style;
    border-width: $button-border-width;
    cursor: $cursor-pointer-value;
    font-family: $button-font-family;
    font-weight: $button-font-weight;
    line-height: normal;
    position: relative;
    text-decoration: none;
    text-align: $button-font-align;
    -webkit-appearance: none;
    -webkit-border-radius:0;
  }
  @if $display { display: $display; }
}

// @MIXIN
//
// We use this mixin to add button size styles
//
// $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
// $full-width - We can set $full-width:true to remove side padding extend width - Default: false

@mixin button-size2($padding:$button-med, $padding-left-right:$button-left-right-padding-var, $full-width:false) {

  // We control which padding styles come through,
  // these can be turned off by setting $padding:false
  @if $padding {
    padding-top: $padding;
    padding-#{$opposite-direction}: $padding * $padding-left-right;
    padding-bottom: $padding + rem-calc(1);
    padding-#{$default-float}: $padding * $padding-left-right;

    // We control the font-size based on mixin input.
    @if      $padding == $button-med { font-size: $button-font-med; }
    @else if $padding == $button-tny { font-size: $button-font-tny; }
    @else if $padding == $button-sml2 { font-size: $button-font-sml2; }
    @else if $padding == $button-lrg { font-size: $button-font-lrg; }
  }

  // We can set $full-width:true to remove side padding extend width.
  @if $full-width {
    // We still need to check if $padding is set.
    @if $padding {
    padding-top: $padding;
    padding-bottom: $padding + rem-calc(1);
    } @else if $padding == false {
      padding-top:0;
      padding-bottom:0;
    }
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
}

// @MIXIN
//
// we use this mixin to create the button hover and border colors

// @MIXIN
//
// We use this mixin to add button color styles
//
// $bg - Primary color set in settings file. Default: $button-bg.
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
// $border-color - Button Border Color. Default: $button-border-color
@mixin button-style2($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null, $set-button-margin-bottom:false, $margin-bottom-var: $button-margin-bottom2) {

  // We control which background styles are used,
  // these can be removed by setting $bg:false
  @if $bg {

    @if $bg-hover == null {
      $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
    }

    @if $border-color == null {
      $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
    }

    // This find the lightness percentage of the background color.
    $bg-lightness: lightness($bg);
    $bg-hover-lightness: lightness($bg-hover);

    background-color: $bg;
    border-color: $border-color;
    &:hover,
    &:focus { background-color: $bg-hover; }

    // We control the text color for you based on the background color.
    color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);

    &:hover,
    &:focus {
      color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
    }
  }

  // We can set $disabled:true to create a disabled transparent button.
  @if $disabled {
    cursor: $button-disabled-cursor;
    opacity: $button-disabled-opacity;
    box-shadow: none;
    &:hover,
    &:focus { background-color: $bg; }
  }

  // We can control how much button radius is used.
  @if $radius == true { @include radius($button-radius); }
  @else if $radius { @include radius($radius); }

  @if $set-button-margin-bottom {
    margin: 0 0 $margin-bottom-var;
  } 

}

// @MIXIN
//
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
//
// $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
// $bg - Primary color set in settings file. Default: $button-bg.
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
// $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
// $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
// $is-prefix - Not used? Default:false.
// $bg-hover - Button Hover Color - Default null - see button-style mixin
// $border-color - Button Border Color - Default null - see button-style mixin
// $transition - We can control whether or not to include the background-color transition property - Default:true.
@mixin button2($padding:$button-med, $padding-left-right:$button-left-right-padding-var, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition:true, $button-bottom-border:false, $set-button-margin-bottom:false, $margin-bottom-var: $button-margin-bottom2) {
  @include button-base2;
  @include button-size2($padding, $padding-left-right, $full-width);
  @include button-style2($bg, $radius, $disabled, $bg-hover, $border-color, $set-button-margin-bottom, $margin-bottom-var);

  @if $transition {
    @include single-transition(background-color);
  }

  @if $button-bottom-border {
    box-shadow: 0 3px 0 (scale-color($primary-color, $lightness: -35%));
  }

}


@include exports("button2") {
  @if $include-html-button-classes2 {

    // Default styles applied outside of media query
    button2, .button2 {
      @include button-base2;
      @include button-size2;
      @include button-style2;

      @include single-transition(background-color);

      &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
      &.success   { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
      &.alert     { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
      &.warning   { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
      &.info      { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }

      &.large  { @include button-size($padding:$button-lrg); }
      &.small  { @include button-size($padding:$button-sml2); }
      &.tiny   { @include button-size($padding:$button-tny); }
      &.expand { @include button-size($padding:null,$full-width:true); }

      &.left-align  { text-align: left; text-indent: rem-calc(12); }
      &.right-align { text-align: right; padding-right: rem-calc(12); }

      &.radius { @include button-style($bg:false, $radius:true); }
      &.round  { @include button-style($bg:false, $radius:$button-round); }

      &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
        &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
        &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
        &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
        &.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
        &.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
      }
    }

    //firefox 2px fix
    button2::-moz-focus-inner {border:0; padding:0;}

    @media #{$medium-up} {
      button2, .button2 {
        @include button-base2($style:false, $display:inline-block);
        @include button-size2($padding:false, $full-width:false);
      }
    }
  }
}