Skip to content

Instantly share code, notes, and snippets.

@sunnywx

sunnywx/SCSS.md

Forked from jareware/SCSS.md
Created July 11, 2018 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sunnywx/087ebdd9859382d8fcb48678e362d24b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sunnywx/087ebdd9859382d8fcb48678e362d24b to your computer and use it in GitHub Desktop.
Download ZIP
Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
Raw
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:

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

Media query nesting

The list data type

Color arithmetic

Defining custom functions

Keyword arguments

Variable interpolation in selectors

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

Variable defaults

Extending classes

...with multiple inheritance.

Control directives

Argument defaults for functions/mixins

Variable arguments for functions/mixins

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

Content block arguments for mixins

Math (and other) functions

Placeholder selectors

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment