Sass/SCSS — Useful Mixins for faster development

The most important principle/rule for my ‘coding routine’ is quality!

“Keep it clean! Keep it simple! Keep it updated!”

These are the words I keep telling myself every single day! The second rule is speed, speed of coding, ‘reusability’!

So! For quality and coding speed what do we need? The answer is mixins! Ok now let’s go a little deeper.

Just an image!

Here are some definitions (and more):

— First of all, what is mixin?
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

— How we create a mixin?
To create a mixin we use the @mixin directive and give it a name. We’re also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After we create our mixin, we can then use it as a CSS declaration starting with @include followed by the name of the mixin.

As you already can see at https://sass-lang.com/guide!!!

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

Ok! Enough with the definitions! Now, my favorite part is coming! Codiiiing.

— 1) Mixin for transition:

@mixin transition($transition) {
   -moz-transition: $transition;
   -o-transition: $transition;
   -ms-transition: $transition;
   -webkit-transition: $transition;
   transition: $transition;
}
@mixin transition2var($transition1,$transition2) {
   -moz-transition: $transition1, $transition2;
   -o-transition: $transition1, $transition2;
   -ms-transition: $transition1, $transition2;
   -webkit-transition: $transition1, $transition2;
   transition: $transition1, $transition2;
}

— 2) Mixin for transform:

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

— 3) Mixin for placeholder:

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

— 4) Mixin for keyframes:

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

— 5) Mixin for fonts:

@mixin fonts($fsize: false, $fcolor: false, $fweight: false,  $flheight: false) {
    @if $fsize { font-size: $fsize; }
    @if $fcolor { color: $fcolor; }
    @if $fweight { font-weight: $fweight; }
    @if $flheight { line-height: $flheight; }
}

How we can call a mixin?

@include transform(translateX(0));
//another one below
@include transition(all 0.4s ease);

I hope this helps someone’s productivity! Let me know guys if you have any questions! Have fun and keep coding! kissez!!!