Adobe Creative Cloud

March 5, 2015 /Code /

Levelling Up With Sass

Using a CSS preprocessor is fast becoming a crucial part of a developer’s workflow. If it isn’t part of your process yet, consider giving it a try! Check out part 1 of this series and get up to speed with basic features such as nesting selectors, variables and mixins.

Using preprocessors can help organize your CSS and reduce redundancy. However, learning more advanced features will make your CSS even more powerful.

This article will focus on stepping up your game with Sass, though many of these techniques will work using Less as well. Just be sure to note the syntax differences.

Nesting selectors

Nesting and grouping related selectors into one block can make your CSS more organized.

header {
    color: black;

    .logo {
        width: 300px;
    }
    nav {
        font-size: 12px;
    }
}

compiles to:

header {
    color: black;
}
header .logo {
    width: 300px;
}
header nav 
    font-size: 12px;
}

But what about pseudo selectors or multiple class & id selectors?

a {
    color: #cc0066;

    :hover {
        color: #cccccc;
    }
}

The above example will compile to:

a {
    color: #cc0066;
}
a :hover {
    color: #cccccc;
}

Nested selectors are assumed to be a child or descendant selector and will automatically add a space between them. This is not what we want for psuedo selectors or targeting multiple classes or ids. For this scenario, use the & symbol.

a {
    color: #cc0066;

    &:hover {
        color: #cccccc;
    }
}
.class-one {
    color: #cc0066;

    &.class-two {
        font-size: 16px;
    }
}

The above example will compile to:

a {
    color: #cc0066;
}
a:hover {
    color: #cccccc;
}
.class-one {
    color: #cc0066;
}
.class-one.class-two {
    font-size: 16px;
}

Reminder for nesting selectors, just like Inception, don’t go more than 3 levels deep!

Variables

Variables are super handy, especially for colors. It’s much easier to remember “orange” rather than “#E74C3C”, right? Suppose you decided to use orange as an accent to add a pop of color here and there throughout your web page. Your Sass may look something like this:

$orange: #E74C3C;

h4 {
  background: $orange;
}
a {
  color: $orange;
}

But what if you wanted to change that accent color to blue? You could create a new $blue variable and replace the existing color or change the value of $orange but then the variable name will be confusing!

Use variables as values

If you’re anything like me, I change my mind a lot, so I want my CSS to be able to bend to all my whims as easily as possible. Try using a combination of declaring style and functional naming conventions, then use the variables as a value of another.

$orange: #E74C3C;
$blue: #0000FF;
$primary-color: $orange;
$secondary-color: $blue;

h4 {
  background: $primary-color;
}
a {
  color: $secondary-color;
}

This way, I’m assigning the colors to the selectors based on their function, not the actual color. If I want to change the color, all I’ll have to do is update the variable value, in just one spot!

This technique can work great for font sizing as well, especially when paired with the math capabilities of the language to create relative sizing values.

$base-font-size: 1rem;
$main-heading: $base-font-size + 1; 
$sub-heading: $base-font-size + .5; 
$small-text: $base-font-size - .5;

body {
  font-size: $base-font-size;
}
h1 {
  font-size: $main-heading;
}
h2 {
  font-size: $sub-heading;
}
.footnote {
  font-size: $small-text;
}

The above will compile to:

body {
  font-size: 1rem;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
.footnote {
  font-size: 0.5rem;
}

Comments

You can use two kinds of comment styles in your Sass files. The traditional CSS style, /* comment */ and also the double forward slash style // comment works as well. What’s the difference? The latter does not compile into the .css file. Which is handy for making your CSS files a little bit smaller. (You can also set your Sass compiler to minify your files as well.)

When using CSS preprocessors, you don’t need to edit your .css files anymore so there’s no need for the comments to compile out anyway.

Sass color functions

Some of my favorite Sass functions for creating various color values are lighten(), darken() and rgba().

In many web designs, you will often see variations of the same color. Instead of trying to find a new color value for each variation, use Sass functions!

$grey: #808080;
$grey-dark: darken($grey, 30); // 30% darker
$grey-light: lighten($grey, 10); // 10% lighter

body {
  color: $grey-dark;
}
.footnote {
  color: $grey-light;
}

The above example will compile to:

body {
  color: #343434;
}
.footnote {
  color: #9a9a9a;
}

Sometimes you will need to add an opaque background color to an element. The best way to achieve this without affecting the opacity of the text contained within that element using tradtional CSS, is to use rgba() as your color value like so:

div {
  background: rgba(173, 216, 230, 0.8);
}

The first three numbers represent the red, green and blue values. The last number is the alpha transparency.

What if your Sass variables have been declared in hex values, like in all the previous examples? You could go and find the equivalent RGB value. Or… use a Sass function!

The rgba(color, alpha) Sass function will automatically convert the value for you.

$orange: #E74C3C;
$blue: #0000FF;
$primary-color: $orange;
$secondary-color: $blue;

div {
  background: rgba($orange, 0.8);
}
span {
  background: rgba($secondary-color, 0.8);
}

Compiles to:

div {
  background: rgba(231, 76, 60, 0.8);
}
span {
  background: rgba(0, 0, 255, 0.8);
}

Mixins

And finally, we arrive to mixins. Mixins are handy for multiple CSS declarations that are used together often.

For example, I don’t like to reset all my lists as part of my base CSS but having that option to easily reset a list when needed, is useful. So I’ll create a mixin just for that.

@mixin list-reset() {
  padding: 0;
  margin: 0;

  li {
    display: inline-block;
  }
}
ul.specific-list {
  @include list-reset();
}

Will compile to:

ul.specific-list {
  padding: 0;
  margin: 0;
}
ul.specific-list li {
  display: inline-block;
}

You’ll still be able to add additional styles to that particular list, but using the mixin will make it a little easier to start.

ul.specific-list {
  @include list-reset();
  width: 100%;
}

Compiles to:

ul.specific-list {
  padding: 0;
  margin: 0;
  width: 100%;
}
ul.specific-list li {
  display: inline-block;
}

Mixins and conditionals

Pair mixins with parameters and conditionals to add even more efficiency to your style sheets. For media queries, try something like this:

@mixin max-width($resolution) {
  @if $resolution == large {
    @media only screen and (max-width: 1024px) { @content; }
  }
  @else if $resolution == medium {
    @media only screen and (max-width: 800px) { @content; }
  }
  @else if $resolution == small {
    @media only screen and (max-width: 400px) { @content; }
  }
}

@include max-width(small){
  .some-class {
    width: 100%;
  }
}
@include max-width(large){
  .another-class {
    width: 50%;
  }
}

Compiles to:

@media only screen and (max-width: 400px) {
  .some-class {
    width: 100%;
  }
}
@media only screen and (max-width: 1024px) {
  .another-class {
    width: 50%;
  }
}

Note the @content within the declaration block. In Sass, this directive simply allows
us to pass pretty much anything in between the curly braces, unlike parameters which are specific types of values.

You can use this example to create media query mixins for min-width as well as declaring a range.

These are just a few examples of how you can use Sass to take traditional CSS the next level. See the documentation on the Sass site for even more ideas.

Now that I’ve listed some of my favorite Sass features, please share your favorites in the comments!

Code

Join the discussion

  • By Jim - 3:26 PM on May 14, 2015  

    Is there any way to get the code coloring and hinting to work with the sass files? Right now it uses the coloring for css which works fine right up until you have a nested style.

    • By Christina - 6:26 PM on May 14, 2015  

      Jim,
      I believe it will depend on which editor you use. Try looking for a Sass code highlighting plugin for you editor of choice.

      • By Matthew - 4:35 PM on June 24, 2015  

        Well, what if my editor of choice is dreamweaver?

        • By Julian - 1:27 AM on September 14, 2016  

          Any update on this?

  • By Nathan - 3:09 PM on July 13, 2015  

    Agreed. I’ve moved away from Dreamweaver in part because of its lack of complete SCSS support. If Dreamweaver added SCSS code coloring and compiling options, I’d be tempted to move back.

  • By Ivar - 7:56 AM on September 2, 2015  

    Any idea if/when Adobe will add a built in sass compiler?

  • By Sébastien - 6:08 PM on October 27, 2015  

    +1 really need a scss colour plugin for dreamweaver!!!! I tried Adobe Brackets thats is an open source code editor from adobe with nice scss (sass) functionality and a lot of plugin BUT… its definively not like dreamweaver. We work in team on the same project and absolutely need the extract/put setting… to work on files… I tried Brackets couple weeks and the plugin used to get file from remote server (eqFTP) work really bad and sometime dont download the file at all before editing… result…lost of code made by my co-worker on a previous session…

    If someone find the key plz email me thx

  • By JD - 9:04 PM on November 18, 2015  

    Typical of Adobe to have a blog post touting the awesomeness of Sass and not support something as simple as code coloring in it’s own editor. Adobe, when are you going to make awesome products again?

  • By Stephen - 11:48 AM on March 17, 2016  

    JD has it spot on. I can’t use Coda and textmate now I’m having to use Windows. which is what i used to use.
    Thought I’d try and switch back to Dreamweaver, thinking maybe I would have a unified workflow ..Photoshop, Illustrator, (webcode software that lets me, FTP, Git, ssh, text editor with code highlighting and color/syntax support for popular languages like (php, sass, html,javascript) .

    Netbeans always feels ugly to me
    Sublime Text is good in that its equivilant of TextMate, hopefully i can ftp with that and i’ll be sorted, as i’m finding i don’t use the wysiwyg feature of dreamweaver anyway

    Christina what’s your favourite editor?

    • By Christina - 3:03 PM on June 27, 2016  

      @Stephen I’m primarily using Atom but I’m also testing out Brackets and Visual Studio Code. There’s so many good editors out there but it’s hard to switch from something you’re used to but I like to try out a few others just to see what’s available.

  • By Adnan - 5:26 AM on September 9, 2016  

    There is no solution for Compiling the Scss into CSS .. Kinldy provide the solution for it…

  • By Argus - 5:11 PM on September 14, 2016  

    Good info here on Dreamweaver Sass setup and having Dreamweaver color code SASS files.

    http://www.lenashore.com/2013/07/setting-up-sass-and-compiling-the-code-with-dreamweaver/

  • By Chris D'Arcy-Bean - 9:55 AM on October 10, 2016  

    Agree with Adnan, info about getting a SASS compiler or watcher would help, especially when working on remote servers..