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!!!

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

— 1) Mixin for transition:

— 2) Mixin for transform:

— 3) Mixin for placeholder:

— 4) Mixin for keyframes:

— 5) Mixin for fonts:

How we can call a mixin?

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

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store