Burak Ozcan

Mixins that are going to make your coding much more effortless.

First of all. What are SASS Mixins?

Mixins are blocks of code we can reuse throughout our CSS without rewriting the blocks. Let’s see an example of a mixin.

@mixin flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

And see how to use it.

.container {
  @include flex-row-center;
}

Simple as it is. You are just inserting it like this. Here are some useful SASS Mixins:

Placeholders

@mixin placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

Usage:

input, 
textarea { 
    @include placeholder {
        color: #333333;
    }
}

Breakpoints

$breakpoints:  (
  "xs": 25em, // 400px
  "sm": 34em, // 544px
  "md": 48em, // 768px
  "lg": 60em, // 960px
  "xl": 80em, // 1280px
  "xxl": 90em // 1440px
);
 
@mixin media-up($breakpoint) {
  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {
    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    // Write the media query.
    @media (min-width: $breakpoint-value) {
      @content;
    }
    // If the breakpoint doesn't exist in the map.
  }
  @else {
    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

Usage:

.img-example {
  width: 300px;
  
  @include media-up(md) {
    width: 600px;
  }
}

In