Useful SCSS mixins

Styling your website has come a long way long. CSS was the canvas for the UI engineers. Although it grew, it grew slowly and had its limitations.

This was answered with the introduction of CSS pre-processors. With the introduction of SCSS and LESS, the limitation for a UI artist is their own imaginations.

So to begin with, here are some SCSS mixins to jumpstart your work.

1. Adding cross-browser mixin

@mixin crossbrowser($property, $value) {
  -webkit-#{}: 
  -moz-#{}: 
  -ms-#{}: 
  #{}: 
};

Usage

@mixin flex {
  @include crossbrowser(display, flex);
}

@mixin flex-direction($direction: row) {
  @include crossbrowser(flex-direction, $direction);
}

@mixin justify-content($justify: flex-start) {
  @include crossbrowser(justify-content, $justify);
}

@mixin box-shadow($left: 5px, $top: 8px, $radius: 32px, $color: rgba(3,3,3,0.2)) {
  @include crossbrowser(box-shadow, $left $top $radius $color);
}

2. Opacity

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

3. Icons

@mixin icons (
  $position: before,
  $icon: false,
  $icon-size: 14px,
  $icon-line-height: 18px,
  $icon-color: $primary-color) {
  @if $position == "before" {
    &:before {
      content: $icon;
      font-family: 'icomoon';
      font-size: $icon-size;
      line-height: $icon-line-height;
      color: $icon-color;
      margin-right: 8px;
    }
  }
  @else if $position == "after" {
    &:after {
      content: $icon;
      font-family: 'icomoon';
      font-size: $icon-size;
      line-height: $icon-line-height;
      color: $icon-color;
      margin-left: 8px;
    }
  }
}

4. Media Queries

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin mobile {
  @media (max-width: #{$tablet-width - 1}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet-width}) {
    @content;
  }
}

@mixin tablet-only {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

5. Buttons

@mixin button($class: primary) {
  border: 1.5px solid $primary-color;
  border-radius: 3px;
  text-transform: uppercase;
  @include transition();
  background: none;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  text-align: center;

  @if $class == primary {
    height: 20px;
    line-height: 17px;
    font-size: 10px;
    @include letter-spacing(160, 10px);
  }

  @else if $class == big {
    font-size: 14px;
    @include flex();
    @include justify-content();
    @include align-items();
    width: fit-content;
    margin: 0 auto;
    line-height: 20px;
    min-height: 28px;
    padding: 0 10px;
  }

  &:hover {
    background: $primary-color;
    color: $white;
  }
}

There you go, I constantly reuse these to jumpstart my projects.

SCSS watch files

Here’s something I found relevant when watching files inside subfolders and compiling to the root.

sass --watch scss:.

As the above code, it will watch the and compile the files inside scss to the root.