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.

The list data type

TODO

Color arithmetic

TODO

Math (and other) functions

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Defining custom functions

No Ruby needed:

@function add-padding($toValue) {
    @return $toValue + 20px;
}

p {
    margin: add-padding(50px);
}

Compiles into:

/* compiled CSS */
p {
  margin: 70px;
}

Argument defaults for functions/mixins

@mixin foobar($a, $b, $padding: 20px) {
    // do something with all these arguments...
}

p {
    @include foobar(123, "abc");
}

p.important {
    @include foobar(123, "abc", 50px);
}

Keyword arguments

If you have a huge helper with:

@mixin foobar($a: 1px, $b: 2px, $c: 3px, $d: 4px, $e: 5px) {
    // do something with all these arguments...
}

p {
    @include foobar($c: 50px); // specify only the argument you want to override
}

Variable arguments for functions/mixins

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

Content block arguments for mixins

@mixin only-for-mobile {
    @media (max-width: 768px) {
        @content;
    }
}

p {
    @include only-for-mobile {
        font-size: 150%;
    }
}

Compiles into:

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

You can mix standard and content block arguments, too:

@mixin only-for-mobile($breakpoint) {
    @media (max-width: #{$breakpoint}) {
        @content;
    }
}

p {
    @include only-for-mobile(768px) {
        font-size: 150%;
    }
}

Variable interpolation in selectors

$alertClass: "error";

p.message-#{$alertClass} {
    color: red;
}

Compiles into:

/* compiled CSS */
p.message-error {
  color: red;
}

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

$breakpoint: 768px; // this would likely go to a _settings.scss somewhere

@media (max-width: #{$breakpoint}) {
    /* This block only applies to viewports <= #{$breakpoint} wide... */
}

Compiles into:

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

Variable defaults

Extending classes

...with multiple inheritance.

Placeholder selectors