Link to home
Start Free TrialLog in
Avatar of Brian
BrianFlag for United States of America

asked on

Sass Button Mixin

I have the following placeholder for all buttons along with multiple button mixins for different types of styling. I would love to know if I would somehow be able to just have one mixin for all of my different styles. Please see my code below.

Mixins:

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// Background Colors from Color Palette

 @mixin bg-colors($map) {
   @each $theme, $color in $map {
     &--#{$theme} {
      background-color: palette($theme);
     }
   }
 }

@mixin btn-flat-rounded($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: palette($theme);
      @include border-radius(3px);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}

@mixin btn-flat-pill($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: palette($theme);
      @include border-radius(50px);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}

@mixin btn-flat-square($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: palette($theme);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}

@mixin btn-flat-circle($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      width: 120px;
      height: 120px;
      padding: 0;
      line-height: 120px;
      background-color: palette($theme);
      @include border-radius(240px);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}





@mixin btn-ghost-rounded($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      @include border-radius(3px);
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

@mixin btn-ghost-pill($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      @include border-radius(50px);
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

@mixin btn-ghost-square($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

@mixin btn-ghost-circle($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      @include border-radius(240px);
      width: 120px;
      height: 120px;
      padding: 0;
      line-height: 120px;
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

Open in new window


Placeholders(Extends):

// Button Styles for all buttons

%btn {
  display: inline-block;
  color: $color-white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
}

Open in new window


Color Variables:

// Color Names

$color-white   : #fff;
$color-red     : #d42c2c;
$color-orange  : #ff7700;
$color-green   : #33cc33;
$color-blue    : #007fff;
$color-purple  : #9933ff;
$color-black   : #000;

// Color Palette Modifiers

$color-palettes: (
    white: (
        base       : $color-white,
        dark       : darken($color-white, 10%),
        mid-dark   : darken($color-white, 20%),
        x-dark     : darken($color-white, 30%)
    ),
    red: (
        base       : $color-red,
        light      : lighten($color-red, 10%),
        mid-light  : lighten($color-red, 20%),
        x-light    : lighten($color-red, 30%),
        dark       : darken($color-red, 10%),
        mid-dark   : darken($color-red, 20%),
        x-dark     : darken($color-red, 30%)
    ),
    orange: (
        base       : $color-orange,
        light      : lighten($color-orange, 10%),
        mid-light  : lighten($color-orange, 20%),
        x-light    : lighten($color-orange, 30%),
        dark       : darken($color-orange, 10%),
        mid-dark   : darken($color-orange, 20%),
        x-dark     : darken($color-orange, 30%)
    ),
    green: (
        base       : $color-green,
        light      : lighten($color-green, 10%),
        mid-light  : lighten($color-green, 20%),
        x-light    : lighten($color-green, 30%),
        dark       : darken($color-green, 10%),
        mid-dark   : darken($color-green, 20%),
        x-dark     : darken($color-green, 30%)
    ),
    blue: (
        base       : $color-blue,
        light      : lighten($color-blue, 10%),
        mid-light  : lighten($color-blue, 20%),
        x-light    : lighten($color-blue, 30%),
        dark       : darken($color-blue, 10%),
        mid-dark   : darken($color-blue, 20%),
        x-dark     : darken($color-blue, 30%)
    ),
    purple: (
        base       : $color-purple,
        light      : lighten($color-purple, 10%),
        mid-light  : lighten($color-purple, 20%),
        x-light    : lighten($color-purple, 30%),
        dark       : darken($color-purple, 10%),
        mid-dark   : darken($color-purple, 20%),
        x-dark     : darken($color-purple, 30%)
    ),
    black: (
        base       : $color-black,
        light      : lighten($color-black, 10%),
        mid-light  : lighten($color-black, 20%),
        x-light    : lighten($color-black, 30%)
    )
);

Open in new window


Button Module:

/* Rounded */
.btn-flat-rounded {
	@include btn-flat-rounded($color-palettes);
}

/* Pill */
.btn-flat-pill {
	@include btn-flat-pill($color-palettes);
}

/* Square */
.btn-flat-square {
	@include btn-flat-square($color-palettes);
}

/* Circle */
.btn-flat-circle {
	@include btn-flat-circle($color-palettes);
}

/****************************************************************************
 Ghost Buttons
****************************************************************************/

/* Rounded */
.btn-ghost-rounded {
	@include btn-ghost-rounded($color-palettes);
}

/* Pill */
.btn-ghost-pill {
	@include btn-ghost-pill($color-palettes);
}

/* Square */
.btn-ghost-square {
	@include btn-ghost-square($color-palettes);
}

/* Circle */
.btn-ghost-circle {
	@include btn-ghost-circle($color-palettes);
}

Open in new window


CSS Output:

.btn-flat-rounded--white, .btn-flat-rounded--red, .btn-flat-rounded--orange, .btn-flat-rounded--green, .btn-flat-rounded--blue, .btn-flat-rounded--purple, .btn-flat-rounded--black, .btn-flat-pill--white, .btn-flat-pill--red, .btn-flat-pill--orange, .btn-flat-pill--green, .btn-flat-pill--blue, .btn-flat-pill--purple, .btn-flat-pill--black, .btn-flat-square--white, .btn-flat-square--red, .btn-flat-square--orange, .btn-flat-square--green, .btn-flat-square--blue, .btn-flat-square--purple, .btn-flat-square--black, .btn-flat-circle--white, .btn-flat-circle--red, .btn-flat-circle--orange, .btn-flat-circle--green, .btn-flat-circle--blue, .btn-flat-circle--purple, .btn-flat-circle--black, .btn-ghost-rounded--white, .btn-ghost-rounded--red, .btn-ghost-rounded--orange, .btn-ghost-rounded--green, .btn-ghost-rounded--blue, .btn-ghost-rounded--purple, .btn-ghost-rounded--black, .btn-ghost-pill--white, .btn-ghost-pill--red, .btn-ghost-pill--orange, .btn-ghost-pill--green, .btn-ghost-pill--blue, .btn-ghost-pill--purple, .btn-ghost-pill--black, .btn-ghost-square--white, .btn-ghost-square--red, .btn-ghost-square--orange, .btn-ghost-square--green, .btn-ghost-square--blue, .btn-ghost-square--purple, .btn-ghost-square--black, .btn-ghost-circle--white, .btn-ghost-circle--red, .btn-ghost-circle--orange, .btn-ghost-circle--green, .btn-ghost-circle--blue, .btn-ghost-circle--purple, .btn-ghost-circle--black {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none; }

/****************************************************************************
 Modules 
****************************************************************************/
/****************************************************************************
 Flat Buttons
****************************************************************************/
/* Rounded */
.btn-flat-rounded--white {
  background-color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
.btn-flat-rounded--red {
  background-color: #d42c2c;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--red:hover {
    background-color: #dd5656; }
.btn-flat-rounded--orange {
  background-color: #ff7700;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--orange:hover {
    background-color: #ff9233; }
.btn-flat-rounded--green {
  background-color: #33cc33;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--green:hover {
    background-color: #5cd65c; }
.btn-flat-rounded--blue {
  background-color: #007fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--blue:hover {
    background-color: #3399ff; }
.btn-flat-rounded--purple {
  background-color: #9933ff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--purple:hover {
    background-color: #b266ff; }
.btn-flat-rounded--black {
  background-color: #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--black:hover {
    background-color: #1a1a1a; }

/* Pill */
.btn-flat-pill--white {
  background-color: #fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
.btn-flat-pill--red {
  background-color: #d42c2c;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--red:hover {
    background-color: #dd5656; }
.btn-flat-pill--orange {
  background-color: #ff7700;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--orange:hover {
    background-color: #ff9233; }
.btn-flat-pill--green {
  background-color: #33cc33;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--green:hover {
    background-color: #5cd65c; }
.btn-flat-pill--blue {
  background-color: #007fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--blue:hover {
    background-color: #3399ff; }
.btn-flat-pill--purple {
  background-color: #9933ff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--purple:hover {
    background-color: #b266ff; }
.btn-flat-pill--black {
  background-color: #000;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--black:hover {
    background-color: #1a1a1a; }

/* Square */
.btn-flat-square--white {
  background-color: #fff; }
.btn-flat-square--red {
  background-color: #d42c2c; }
  .btn-flat-square--red:hover {
    background-color: #dd5656; }
.btn-flat-square--orange {
  background-color: #ff7700; }
  .btn-flat-square--orange:hover {
    background-color: #ff9233; }
.btn-flat-square--green {
  background-color: #33cc33; }
  .btn-flat-square--green:hover {
    background-color: #5cd65c; }
.btn-flat-square--blue {
  background-color: #007fff; }
  .btn-flat-square--blue:hover {
    background-color: #3399ff; }
.btn-flat-square--purple {
  background-color: #9933ff; }
  .btn-flat-square--purple:hover {
    background-color: #b266ff; }
.btn-flat-square--black {
  background-color: #000; }
  .btn-flat-square--black:hover {
    background-color: #1a1a1a; }

/* Circle */
.btn-flat-circle--white {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #fff;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
.btn-flat-circle--red {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #d42c2c;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--red:hover {
    background-color: #dd5656; }
.btn-flat-circle--orange {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #ff7700;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--orange:hover {
    background-color: #ff9233; }
.btn-flat-circle--green {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #33cc33;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--green:hover {
    background-color: #5cd65c; }
.btn-flat-circle--blue {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #007fff;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--blue:hover {
    background-color: #3399ff; }
.btn-flat-circle--purple {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #9933ff;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--purple:hover {
    background-color: #b266ff; }
.btn-flat-circle--black {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #000;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--black:hover {
    background-color: #1a1a1a; }

/****************************************************************************
 Ghost Buttons
****************************************************************************/
/* Rounded */
.btn-ghost-rounded--white {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-rounded--white:hover {
    border: 1px solid; }
.btn-ghost-rounded--red {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-rounded--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-rounded--orange {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-rounded--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-rounded--green {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-rounded--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-rounded--blue {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-rounded--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-rounded--purple {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-rounded--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-rounded--black {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-rounded--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Pill */
.btn-ghost-pill--white {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-pill--white:hover {
    border: 1px solid; }
.btn-ghost-pill--red {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-pill--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-pill--orange {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-pill--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-pill--green {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-pill--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-pill--blue {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-pill--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-pill--purple {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-pill--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-pill--black {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-pill--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Square */
.btn-ghost-square--white {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-square--white:hover {
    border: 1px solid; }
.btn-ghost-square--red {
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-square--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-square--orange {
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-square--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-square--green {
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-square--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-square--blue {
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-square--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-square--purple {
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-square--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-square--black {
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-square--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Circle */
.btn-ghost-circle--white {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-circle--white:hover {
    border: 1px solid; }
.btn-ghost-circle--red {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-circle--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-circle--orange {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-circle--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-circle--green {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-circle--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-circle--blue {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-circle--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-circle--purple {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-circle--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-circle--black {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-circle--black:hover {
    color: #333333;
    border: 1px solid #333333; }

Open in new window

Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Hi mate, this is just a whole lot of code to digest.
I didn't quite get what you mean with "one mixin for all of my different styles"

Can you go a bit more to the point?
Can you give me a narrowed example of what you have and one example of what you want to achieve (even if in pseudo code)?
Avatar of Brian
Brian
Flag of United States of America image

ASKER

Hi Alexandre Simões,

Sorry for the confusion with all that code. I would like to have the following buttons styles below. As you will see I have two categories of buttons named Flat Buttons and Ghost Buttons. Each Button category has 3 styles as listed below. I created an extend/placeholder below that all button styles will have so that i'm not repeating my code for all styles.

Flat Buttons:
 - rounded
 - square
 - pill

Ghost Buttons:
 - rounded
 - square
 - pill

Button Extend/Placeholder:
// Button Styles for all buttons

%button {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
}

Open in new window


Each button style listed in the two categories above will all need the following properties:
 - text color
 - background color / hover background color
 - border color / hover border color (border color is only for ghost buttons not flat buttons)

Below is the output that I currently have now. However, in order for me to make the following styles I have the one extend/placeholder as listed above along with multiple mixins for each button style per button category. I would like to just have the one extend/placeholder and one button mixin if that' possible.

Output CSS:
.btn-flat-rounded--white, .btn-flat-rounded--red, .btn-flat-rounded--orange, .btn-flat-rounded--green, .btn-flat-rounded--blue, .btn-flat-rounded--purple, .btn-flat-rounded--black, .btn-flat-pill--white, .btn-flat-pill--red, .btn-flat-pill--orange, .btn-flat-pill--green, .btn-flat-pill--blue, .btn-flat-pill--purple, .btn-flat-pill--black, .btn-flat-square--white, .btn-flat-square--red, .btn-flat-square--orange, .btn-flat-square--green, .btn-flat-square--blue, .btn-flat-square--purple, .btn-flat-square--black, .btn-ghost-rounded--white, .btn-ghost-rounded--red, .btn-ghost-rounded--orange, .btn-ghost-rounded--green, .btn-ghost-rounded--blue, .btn-ghost-rounded--purple, .btn-ghost-rounded--black, .btn-ghost-pill--white, .btn-ghost-pill--red, .btn-ghost-pill--orange, .btn-ghost-pill--green, .btn-ghost-pill--blue, .btn-ghost-pill--purple, .btn-ghost-pill--black, .btn-ghost-square--white, .btn-ghost-square--red, .btn-ghost-square--orange, .btn-ghost-square--green, .btn-ghost-square--blue, .btn-ghost-square--purple, .btn-ghost-square--black {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none; }

/* Rounded */
.btn-flat-rounded--white {
  background-color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
.btn-flat-rounded--red {
  background-color: #d42c2c;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--red:hover {
    background-color: #dd5656; }
.btn-flat-rounded--orange {
  background-color: #ff7700;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--orange:hover {
    background-color: #ff9233; }
.btn-flat-rounded--green {
  background-color: #33cc33;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--green:hover {
    background-color: #5cd65c; }
.btn-flat-rounded--blue {
  background-color: #007fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--blue:hover {
    background-color: #3399ff; }
.btn-flat-rounded--purple {
  background-color: #9933ff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--purple:hover {
    background-color: #b266ff; }
.btn-flat-rounded--black {
  background-color: #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--black:hover {
    background-color: #1a1a1a; }

/* Pill */
.btn-flat-pill--white {
  background-color: #fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
.btn-flat-pill--red {
  background-color: #d42c2c;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--red:hover {
    background-color: #dd5656; }
.btn-flat-pill--orange {
  background-color: #ff7700;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--orange:hover {
    background-color: #ff9233; }
.btn-flat-pill--green {
  background-color: #33cc33;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--green:hover {
    background-color: #5cd65c; }
.btn-flat-pill--blue {
  background-color: #007fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--blue:hover {
    background-color: #3399ff; }
.btn-flat-pill--purple {
  background-color: #9933ff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--purple:hover {
    background-color: #b266ff; }
.btn-flat-pill--black {
  background-color: #000;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--black:hover {
    background-color: #1a1a1a; }

/* Square */
.btn-flat-square--white {
  background-color: #fff; }
.btn-flat-square--red {
  background-color: #d42c2c; }
  .btn-flat-square--red:hover {
    background-color: #dd5656; }
.btn-flat-square--orange {
  background-color: #ff7700; }
  .btn-flat-square--orange:hover {
    background-color: #ff9233; }
.btn-flat-square--green {
  background-color: #33cc33; }
  .btn-flat-square--green:hover {
    background-color: #5cd65c; }
.btn-flat-square--blue {
  background-color: #007fff; }
  .btn-flat-square--blue:hover {
    background-color: #3399ff; }
.btn-flat-square--purple {
  background-color: #9933ff; }
  .btn-flat-square--purple:hover {
    background-color: #b266ff; }
.btn-flat-square--black {
  background-color: #000; }
  .btn-flat-square--black:hover {
    background-color: #1a1a1a; }

.btn-ghost-rounded--white {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-rounded--white:hover {
    border: 1px solid; }
.btn-ghost-rounded--red {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-rounded--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-rounded--orange {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-rounded--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-rounded--green {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-rounded--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-rounded--blue {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-rounded--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-rounded--purple {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-rounded--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-rounded--black {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-rounded--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Pill */
.btn-ghost-pill--white {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-pill--white:hover {
    border: 1px solid; }
.btn-ghost-pill--red {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-pill--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-pill--orange {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-pill--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-pill--green {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-pill--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-pill--blue {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-pill--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-pill--purple {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-pill--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-pill--black {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-pill--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Square */
.btn-ghost-square--white {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-square--white:hover {
    border: 1px solid; }
.btn-ghost-square--red {
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-square--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-square--orange {
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-square--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-square--green {
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-square--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-square--blue {
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-square--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-square--purple {
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-square--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-square--black {
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-square--black:hover {
    color: #333333;
    border: 1px solid #333333; }

Open in new window

Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
If I'm understanding correctly what you want, the only option is to create a single mixin that receives the options as arguments or picks them from global variables.
Basically it's what you already have but everything nested inside one single mixin.

The result will be several nested @each and that can become quite messy/unreadable in no time.

Honestly I would prefer to leave everything separate and assembling it in one final scss file.
You can create a folder for the buttons, separate all the blocks on your question in different files and finally create the main scss file that assembles everything with all the imports and is the only one responsible for generating the css file.

Maybe this is not the most geeky way but If you think about maintenance, this will be by far the best option.
Avatar of Brian
Brian
Flag of United States of America image

ASKER

>> If I'm understanding correctly what you want, the only option is to create a single mixin that receives the options as arguments or picks them from global variables.
Basically it's what you already have but everything nested inside one single mixin.

That is correcty Alexandre, I was hoping to be able to just have one mixin for all Button Styles. As of now, I have a mixin for each button style since they are all different. Do you just suggest that I keep it how it is rather than trying to have just one mixin?
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial