Advanced SCSS Tricks and Techniques

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    body.no-touch & {
3        /* hide the message if not on a touch device */
4        display: none;
5    }
6}

It will be compiled to:

1body.no-touch p {
2  display: none;
3}

2. Variable expansion (Interpolation) in Selectors

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

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

even with media queries or CSS comments:

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

which then complie into this:

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

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.