SCSS: My mixins for CSS

Jekyll does support SASS and SCSS, the documentation can be found at sass-lang.com. These both techniques are a kind of pre-compiler or pre-processor to generate css - cascading style sheets. This blog uses jekyll as a static site generator, so we can use SCSS as well.

To reuse sass or scss code Mixins were introduced. Mixins helps to keep the code cleaner and easier to maintain. With Mixins you can created nested css-styles, use css-fallbacks as a single command, reuse group of css-styles and much more.

Here you can see the mixins which are used on the current blog.

// ########################
// ORDER OF MIXIN FALLBACKS
//   property: -webkit-XXX; // Webkit
//   property: -moz-XXX;    // Mozilla Firefox
//   property: -ms-XXX;     // Microsoft IE, Edge
//   property: -o-XXX;      // Opera
//   property: XXX;

@mixin nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin rounded($radius: 0.5em) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

@mixin transition($time){
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
  transition: $time;
}

@mixin transform($transformation) {
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;
  transform: $transformation;  
}

@mixin transform-style($style){
  -webkit-transform-style: $style;
  -moz-transform-style: $style;
  -ms-transform-style: $style;
  -o-transform-style: $style;
  transform-style: $style;
}

To use one of the mixins inside your scss (SASS and SCSS files are by default placed inside the _sass folder), just do …

@import "mixins";

.element-with-shadow {
  @include box-shadow(0px, 0px, 5px, gray);
}

… and this css will be generated

.element-with-shadow{-webkit-box-shadow:0px 0px 5px gray;-moz-box-shadow:0px 0px 5px gray;box-shadow:0px 0px 5px gray}