Take a look at these SCSS tips
SCSS is one of my favorite languages. I always liked CSS and when I discovered SCSS I started enjoying it from the beginning.
This post is not about the new 2019 CSS features or what can you do with the SCSS last version. I’m going to explain a few things that helped me while working with SCSS and show them with examples. For that purpose, I’m using super-easy but self-explanatory gist snippets as examples.
1. Short names for simple functions
Since naming is one of the hardest things in programming, I try to keep function names short but meaningful. I usually write very simple functions that can be time-saving solutions.
The most important is to set a toolkit adapted to the functionalities you use and then keep it growing as you need more of them.
2. Handle decomposed rules together
It’s told that programmers’ laziness is a virtue. Do mixins to avoid writing too much or checking again a name property and its default value. Here I show you two simple examples.
2.1 Background
Sometimes you want to set all sub-properties of background and writing all them can take too long. How many times do you forget the slash between background-position and background-size? Or checking what was the path to your images folder?
I’m setting a map with the default CSS values. This way the shorthand syntax can be explicit and add all values. Are you using background-repeat: repeat; as many times as me? Change the default value to no-repeat and don’t bother again.
With $shorthand: false parameter background property will break up to its sub-properties. By having them separated you will skip undeclared properties.
2.2 Transition
How many times have you written transition-timing-function? Me neither. Transition mixin works as the previous background mixin.
If what you prefer is not having the shorthand abled by default you just have to switch it.
3. Group separated rules if possible
There are rules that need another rule to actually work. This happens quite often in CSS. Happens with display: flex and justify-content, display: inline and vertical-align, etc.
This happens also with the position rule. Margin or padding has four-sided shorthand syntax. Absolute positioning hasn’t. Sometimes you just want to set all sides to zero and you have to specifically write each one. Don’t ask me why.
Call the mixin passing a list as a parameter and it will apply top, right, bottom and left properties like margin does.
4. DRY aka reuse your code
As soon as you realize you’re repeating yourself, you should create reusable code.
The following snippet is useful when you need to wrap an image. As long as you know its dimensions it will generate a responsive wrapper.
This padding-bottom magic works and it is well explained by Thierry Koblentz in his article. I just did the maths part easier.
Here I am using the :before pseudo-selector as I don’t like my SCSS to ask for any extra markup. If you want to wrap a video or iframe, feel free to adapt it. You always can extend from this a mixin.
All these snippets should be imported in the order they are presented.
I hope you found it interesting and any of these tips could help you.
Thanks for reading.
