Navigate back to the homepage

Advanced SCSS Tricks and Techniques

In this article, I'll share a series of hints and tips that will help you build scalable and DRY CSS, with just a couple of lines of code.

Ahmed Abdulrahman
Apr 5th, 2020 • ☕️ 1 min read

1. Prefixing parent selector based on context

You might be familiar with using & in the beginning of your nested selectors.

1a {
2 &:hover {
3 color: purple;
4 }
5 }

Sometimes you want to change to the styling of an element based on a selector match much closer to the DOM root. To achieve it, you can qualify a selector by prefixing &:

1p {
2 & {
3 /* hide the message if not on a touch device */
4 display: none;
5 }

It will be compiled to: p {
2 display: none;

2. Variable expansion (Interpolation) in Selectors

Variable expansion (Interpolation) is particularly useful for injecting values into strings dynamically generating names

1$successClass: "error";
3span.message-#{$successClass} {
4 color: green;

even with media queries or CSS comments:

1$breakpoint: 1440px;
2@media (max-width: #{$breakpoint}) {
3 /* Media only applies to the viewports <= #{$breakpoint} wide... */

which then complie into this:

1/* compiled CSS */
2@media (max-width: 1440px) {
3 /* This block only applies to viewports <= 768px wide... */

3. Variable Defaults Values

This is what it looks like:

1$example: 'value' !default;

So using Sass !default is like adding an “unless this is already assigned” qualifier to your variable assignments. But what’s the use case for this?

Example: custom styles for a white label app Recently, a client asked us to create a white label app: they wanted their customers to be able to customize things like colors, logo, background, etc., but to have fallbacks for customers who wouldn’t use custom branding. How do you handle this with Sass? Let’s step through it.

First, all of these customizable parts are defined in variables.

If your SCSS module can be configured using globals (which tends to be the SCSS way), you can declare them with a default value:

// _my-module.scss: $message-color: blue !default;

p.message { color: $message-color; } / compiled CSS / p.message { color: blue; } But you can then optionally override the module defaults before its inclusion:

$message-color: black; @import ‘my-module’; / compiled CSS / p.message { color: black; } That is, an assignment with a !default will only take effect if such a variable didn’t have a value before (in contrast to the standard assignment, which will always overwrite a possible previous value).

This is how many SCSS modules (including most that ship with Compass) are configured.

Discuss on TwitterFollow @_ahmed_ab

Other things I've written

Understand the concept of Images and Containers

A step by step guide to understanding the concept of Images and Containers in Docker

Feb 13th, 2020 · 2 min read

How to install Docker on macOS

Beginner’s guide to install and run Docker on macOS.

Feb 10th, 2020 · 1 min read

© 2018–2020
Ahmed Abdulrahman


Link to $ to $ to $