Best SASS Mixins

I still remember when HAML and SASS came out. It was like Christmas. Being able to NEST syntax by itself was a huge revelation back in 2007. But let's move past that. Below are my personal favorite mixins and functions I use in every single application I develop.

Margin and padding loops

$spaceamounts: (0, 10, 20, 30, 50);
$sides: (top, bottom, left, right, all);

@each $space in $spaceamounts {
  @each $side in $sides {

    @if $side == 'all' {
      .m#{$space} {
        margin: #{$space}px;
      }

      .p#{$space} {
        padding: #{$space}px;
      }
    } @else {
      .m#{str-slice($side, 0, 1)}#{$space} {
        margin-#{$side}: #{$space}px;
      }

      .p#{str-slice($side, 0, 1)}#{$space} {
        padding-#{$side}: #{$space}px;
      }
    }
  }
}

I bet you didn't know you could SLICE like we're in JS land did you? (you can also str-replace) Not to mention running loops over each other to get every combination of margin and spacing needed. Below are the margin classes generated for 10px ready to be used anywhere within the app.

.m10 {
  margin: 10px;
}
.mt10 {
  margin-top: 10px;
}
.mb10 {
  margin-bottom: 10px;
}
.ml10 {
  margin-left: 10px;
}
.mr10 {
  margin-right: 10px;
}

Conditional styling

@mixin button($width, $color, $type) {
width: $width + px;
color: $color;
  @if $type == primary {
    background: $color;
    color: $darkGray;
  } @else if $type == secondary {
    color: $color;
  }
  @if $width > 200 {
    &:before {
      // using an icon font to show an icon
      content: "\e9ad";
      margin-right: 10px;
      display: inline-block;
    }
  }
}

Not only can you pass CSS variables like color, width, etc. but you can perform conditional checks on any of them as well. This becomes incredibly powerful when you have enterprise-level applications where you may have 4-5 different types of buttons.

Functions

// slightly lighten
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

// slightly darken
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// auto detect background and set color
@function set-text-color($color) {
  @if (lightness($color) > 50) {
    @return #333; // Light background
  } @else {
    @return #eee; // Dark background
  }
}

These I use less often, but when there's a design need to do any color shifting or color detection on child -> parent elements, I resort to a function. These combined with operators can be extremely powerful.

@function background-gradient($color, $deg, $addPadd, $amount) {
  @if ($addPadd === true) {
    width: calc(100% - $amount);
    margin: $amount;
  }
  background: linear-gradient($deg, saturate($color, 20%), lighten($color, 20%), darken($color, 10%), $color);
}

Do you have any you'd like added to the list? Hit me up on twitter or comment below.