Solved

Sass Button Mixin

Posted on 2015-02-20
5
147 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
  • 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now