Solved

Sass Button Mixin

Posted on 2015-02-20
5
1 solution
165 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 500 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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Free Trial
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question
How to Become a Web Developer
Article by: Ryan
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
7 Sure Fire Ways To Improve Your Web Performance Strategy
Article by: Anush
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Migrating the Website
Video by: doug
This video teaches users how to migrate an existing Wordpress website to a new domain.
Introduction to Accessibility (Part 1)
Video by: Jason
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Advertise Here

627 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