Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do

SCSS.md

N cool things you may not have known about SCSS

Things you probably knew already...

...but are always worth mentioning, because they're incredibly cool compared to vanilla CSS:

• Nested selectors
• Variables
• Mixins

Prefixing parent selector references

Familiar way:

a {
    &:hover {
        color: red;
    }
}

Compiles into:

/* compiled CSS */
a:hover {
  color: red;
}

But can be used with a prefix just as well:

p {
    body.no-touch & {
        display: none;
    }
}

Gives you:

/* compiled CSS */
body.no-touch p {
  display: none;
}

Media query bubbling

p {
    @media (max-width: 768px) {
        // Use larger text for smaller screens:
        font-size: 150%;
    }
}

Compiles into:

/* compiled CSS */
@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}

Media query nesting

p {
    @media (max-width: 768px) {

        // Use larger text for smaller screens:
        font-size: 150%;

        @media (orientation: landscape) {

            // Condense text a bit because of small vertical space:
            line-height: 75%;
        }
    }
}

Compiles into:

/* compiled CSS */
@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}
@media (max-width: 768px) and (orientation: landscape) {
  p {
    line-height: 75%;
  }
}

Control directives

$debug: false; // this would likely be in a _settings.scss somewhere

article {

    color: black;

    @if ($debug) {
        border: 1px dotted red;
    }
}

Compiles into:

/* compiled CSS */
article {
  color: black;
}

There's also @for, @each and @while.

Math (and other) functions

Defining custom functions

The list data type

Color arithmetic

Keyword arguments

Variable interpolation in selectors

...or almost anywhere else, for that matter.

Variable defaults

Extending classes

...with multiple inheritance.

Argument defaults for functions/mixins

Variable arguments for functions/mixins

...and expanding and/or extending during further calls.

Content block arguments for mixins

Placeholder selectors