Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Sass Button Mixin

Posted on 2015-02-20
5
1 solution
Medium Priority
?
173 Views
Last Modified: 2015-02-28
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

0
Comment
Question by:asp_net2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40624385
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)?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40624824
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

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40625229
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.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40625668
>> 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?
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40625744
Yes.
As you have it it's easier to maintain.
At the end it will all be "compiled" into proper CSS so the clearer and cleaner your SCSS is the better.

It's like Object Oriented programming style deciding either to have one big function with everything inside or separate smaller functions that get called by the main function,
Which would you prefer?
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Learn More
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Marketing 101 – The ABCs of a Homepage
Article by: Christian
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Understanding Web Applications
Article by: Andrew
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Introduction to HTML (Part 1)
Video by: Jason
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Lists and Links
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Advertise Here

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here