[CSS] 5 Useful mixins for SASS

Table of contents

1. The Cross-Browsers
2. CSS3 Animations
3. Generating fontawesome icons
4. Input placeholder styles
5. The responsive mode: breakpoints
References

1. The Cross-Browsers

@mixin border-radius($top, $right:null, $bottom:null, $left:null) {
  -moz-border-radius: $top $right $bottom $left;
  -webkit-border-radius: $top $right $bottom $left;
  border-radius: $top $right $bottom $left;
}

@mixin background-size($val) {
  -moz-background-size: $val!important;
	-o-background-size: $val!important;
	-webkit-background-size: $val!important;
	background-size: $val!important;
}

@mixin border-image($val) {
  -webkit-border-image: $val;
  -o-border-image: $val;
  border-image: $val;
}

@mixin appearance($val) {
  -moz-appearance: $val;
  -webkit-appearance: $val;
}

@mixin transform($transforms) {
  -webkit-transform: $transforms;
  transform: $transforms;
}

@mixin animation($val) {
  -webkit-animation: $val;
  -moz-animation: $val;
  -o-animation: $val;
  animation: $val;
}

@mixin transition($val) {
  -webkit-transition: $val;
  transition: $val;
}

@mixin box-shadow($val) {
  -webkit-box-shadow: $val;
  box-shadow: $val;
}

2. CSS3 Animations

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

Examples of how to use, combined animations with cross browser transform:

@include keyframes(bounce) {
  0% {
    @include transform(translateY(0));
  }
  50% {
    @include transform(translateY(-10px));
  }
  100% {
    @include transform(translateY(0));
  }
}

What will be printed out:

@-webkit-keyframes bounce {
0% {
  -webkit-transform: translateY(0);
  transform: translateY(0); }
50% {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px); }
100% {
  -webkit-transform: translateY(0);
  transform: translateY(0); } 
}

@keyframes bounce {
0% {
  -webkit-transform: translateY(0);
  transform: translateY(0); 
}
50% {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px); 
}
100% {
  -webkit-transform: translateY(0);
  transform: translateY(0); } 
}

Add the animation to an element:

i {
  &.bounce {
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
  }
}

3. Generating fontawesome icons

$primary: #000;
$fontawesome-font-face: "Font Awesome 5 Free";

@mixin generate-fontawesome-icon ($content, $color:$primary) {
  content: $content;
  font-family: $fontawesome-font-face;
  color: $color;
  font-weight: 900;
}

Example of how to use:

li {
  &:before {
    @include generate-fontawesome-icon ("\f058", $primary);
    margin-right: 2px;
  }
}

What will be printed out:

li:before {
   content: "\f058";
   font-family: "Font Awesome 5 Free";
   color: #000;
   font-weight: 900;
   margin-right: 2px; 
}

4. Input placeholder styles

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

Example of how to use:

input[type="email"] {
  @include input-placeholder {
    font-size: $font-size-base;
    font-style: italic;
  }
}

What will be printed out:

input[type="email"].placeholder {
  font-size: 1rem;
  font-style: italic;
}

input[type="email"]:-moz-placeholder {
  font-size: 1rem;
  font-style: italic;
}

input[type="email"]::-moz-placeholder {
  font-size: 1rem;
  font-style: italic;
}

input[type="email"]:-ms-input-placeholder {
  font-size: 1rem;
  font-style: italic;
}

#binput[type="email"]::-webkit-input-placeholder {
  font-size: 1rem;
  font-style: italic;
}

5. The responsive mode: breakpoints

This very useful piece of code is from Glenn McComb blog. Please visit the blog if you would like to see more explanations and a deeper implementation on this.

// Media queries
/* This commented block is for reference. This is what bootstrap is using
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
); */

@mixin response-above($breakpoint) {
    $breakpoint-value: map-get($grid-breakpoints, $breakpoint);
    @media (min-width: $breakpoint-value) {
      @content;
    }
}
@mixin response-below($breakpoint) {
    $breakpoint-value: map-get($grid-breakpoints, $breakpoint);
    @media (max-width: ($breakpoint-value - 1)) {
      @content;
    }
}
@mixin response-between($lower, $upper) {
    $lower-breakpoint: map-get($grid-breakpoints, $lower);
    $upper-breakpoint: map-get($grid-breakpoints, $upper);
    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
}

Example of how to use:

img {
    @include response-above(lg) {
       padding: 15px;
    }
    @include response-below(lg) {
       padding: 7px;
    }
}

What will be printed out:

@media (min-width: 992px) {
  .tablepress img {
    padding: 15px; 
  } 
}
@media (max-width: 991px) {
  .tablepress img {
    padding: 7px; 
  } 
}

[CSS] 5 Useful mixins for SASS

1. The Cross-Browsers

2. CSS3 Animations

3. Generating fontawesome icons

4. Input placeholder styles

5. The responsive mode: breakpoints

References

Recent posts

[HTML, CSS] Add a floating button to WordPress website without plugins

[WordPress] Add content at the end of every post without plugins

[WordPress] How to transform post title into UPPERCASE without plugins

1. The Cross-Browsers

2. CSS3 Animations

3. Generating fontawesome icons

4. Input placeholder styles

5. The responsive mode: breakpoints

References

Recent posts

Reader Interactions

Leave a Reply Cancel reply