Adobe Creative Cloud

February 25, 2015 /Code /

Getting Started with CSS Preprocessors (Less and Sass)

What are CSS preprocessors?

CSS is the language used to make the web beautiful. Preprocessors can be used to help make CSS more beautiful.

CSS preprocessors extend the basic functionalities, overcoming many limitations of traditional CSS by adding features such as variables, nesting selectors and mixins, creating CSS that is more maintainable and efficient.

CSS written in a preprocessed language must also be converted or compiled into traditional CSS syntax. There are many apps that can be used to do this and will be discussed further in this article.

Why make CSS more complicated?

I have to admit, I resisted at first as well. I didn’t want to make CSS more complicated. However, once you get up and running, it’ll be hard to go back to writing regular CSS. The great thing about preprocessors is you can use as little or as many features that you want. So the learning curve is only as steep as you want it to be.

Getting started with even just the basic features will greatly improve your workflow.

There is one thing I’d like to point out. If you are a CSS newbie, it might make more sense to get more comfortable with CSS and best practices first before diving into using preprocessors. A tip for anybody starting out with preprocessors is to look at the CSS that is being compiled to make sure you are still following best practices.

Which one should I choose?

There are three popular preprocessors to choose from: Sass, Less, Stylus.

Ask any web developer and you’ll hear passionate arguments as to which one is better but at the end of the day, it’s a personal choice. My advice is try a couple and figure out which one you works for you. Each tool may have specific features that the others don’t have but the basics and syntax is similar making it easier to learn the others once you have one under your belt.

Personally, I started with Less because I found the documentation easier to read and am now using Sass, mostly because a project I was working on was already using Sass and now I just prefer it!

This article will go over the basics of getting up and running with Sass or Less (sorry Stylus, maybe next time).

Getting started with Less or Sass

Both Less and Sass are backwards compatible so you can easily convert your existing CSS files into Less or Sass just by renaming the .css file extension to .less or .scss, respectively.

Less is JavaScript based and Sass is Ruby based but you don’t have to know anything about either language or use the command line to compile the files into CSS. There are various apps, free and paid, that will take care of that for you! Here’s a list for Less and for Sass.

These apps will watch your files for changes and automatically compile your updates into new CSS files. So remember, when using a preprocessor, you’ll never have to touch your .css files again!

Note that you only need to link the .css files to your HTML pages, not the .scss or .less files. Those are strictly for development.

Comments

You can use two kinds of comment styles in your Sass or Less 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.

Variables

Variables are a great way to get up and running with preprocessors. Ever had a project with multiple colors? Which is easier to remember, darkblue or #00008B? With variables, you can assign values to a name, then use the variable name in your CSS.

Note that variables can only be defined once so be careful when choosing names. Also, using functional naming conventions versus style naming conventions can be useful as well.

Variables must be declared first, so it loads first and the CSS that comes after it can reference it.

Less

Use the @ symbol to define a variable.


    @darkblue: #00008B;
    @border-color: #CCCCCC; //gray
    @base-font-size: 16px;
    
    body {
        font-size: @base-font-size;
    }
    header {
      border-bottom: 1px solid @border-color;
    }
    a {
      color: @darkblue;
    }

 

Sass

Use the $ symbol to define a variable.


    $darkblue: #00008B;
    $border-color: #CCCCCC; //gray
    $base-font-size: 16px;
    
    body {
        font-size: $base-font-size;
    }
    header {
      border-bottom: 1px solid $border-color;
    }
    a {
      color: $darkblue;
    }

 

Both will compile to:

    
    body {
        font-size: 16px;
    }
    header {
      border-bottom: 1px solid #CCCCCC;
    }
    a {
      color: #00008B;
    }

 

Making changes is also easier when using variables. For example, if you decide to use a different dark blue color after you’ve already declared it throughout your CSS file, all you have to do is change the value of the darkblue variable and it will update wherever the variable was used, when the CSS file is re-compiled.

Note that the variable declarations itself don’t get compiled. Only traditional CSS declarations are compiled.

Nesting selectors

Nesting selectors keeps the stylesheet organized by grouping related CSS in chunks. The syntax is the same for both Less and Sass.

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

 

Compiles to:


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

 

Nesting is also useful for making easy changes as well. Let’s say you decided to use a class of header instead of selecting the header element. In the traditional CSS example, you would have to update all three declaration blocks. When using a preprocessor, you only have to edit it once!

Remember to stick to best practices when nesting selectors. With preprocessors it tempting to nest everything but avoid going more than three levels deep!


    nav {
        ul.main-nav {
            li {
                a {
                    //too many levels!
                }
            }
        }
    }

 

Compiles to:


    nav ul.main-nav li a {
        // too many levels!
    }

 

Mixins

Mixins are a great way to create reusable chunks of CSS. Unlike variables, which only hold one value, mixins can hold multiple CSS declarations, as many as you need.

Let’s say you want to create a base button style where the buttons will always have the same border style and rounded corners.

In Less, mixins are created just like a class declaration block. This means any class can be used as a mixin. Just like variables, declare the mixin first before using it. To use the mixin, include it by its name.

Less mixin


    .rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    
    .button-green {
        .rounded-border;
        background: green;
    }

 

Compiles to:


    .rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

 

Since the syntax is the same as using a class as your selector, the mixin will be compiled. If you want to create a mixin that will only be compiled when used, add a set of parentheses () to the mixin name.


    .rounded-border() {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    
    .button-green {
        .rounded-border();
        background: green;
    }

 

This will compile to just this:


    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

 

Sass Mixin

Let’s use the same example to demonstrate the Sass syntax. Sass requires a @mixin directive, followed by the mixin name as well as @include to use the mixin.


    @mixin rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
        
    .button-green {
        @include rounded-border;
        background: green;
    }

 

Will compile to this:


    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

 

Mixins and Parameters

To make your mixins even more flexible and reusable, use parameters. Suppose you wanted to create a square, but use different sizes and different border colors. The variable values can be added to the mixin, between the parentheses, as parameters. Then add the variable name to the corresponding property value. Mixins can have one or more parameters, separated by a comma.

In the below example, size represents height and width, and color represents border color.

Less


    square(@size, @color){
      width: @size;
      height: @size;
      border: 1px solid @color;
    }
    
    .box1 {
      .square(50px, #ccc);
    }
    .box2 {
      .square(100px, #ddd);
    }

 

Sass


    @mixin square($size, $color){
        width: $size;
        height: $size;
        border: 1px solid $color;
    }
    .box1 {
        @include square(50px, #ccc);
    }
    .box2 {
        @include square(100px, #ddd);
    }

 

Both will compile to:


    .box1 {
        width: 50px;
        height: 50px;
        border: 1px solid #cccccc;
    }
    .box2 {
        width: 100px;
        height: 100px;
        border: 1px solid #dddddd;
    }

 

There are many more features available and documented on both the Less and Sass sites. However, getting started with nesting, variables and incorporating mixins is a great way to start supercharging your CSS workflow. Stay tuned for part two of this series.

Code

Join the discussion

  • By FlyDuo - 3:34 PM on April 2, 2015  

    Great post Christina!
    I’ve been hesitant on moving forward on either. But, as more and more of my dev friends have encouraged me to do so, I know it’s time. I’ve been doing development for many years now and this is a big change in how we work, but I’m really excited about what this means for how we work. Your break down was really well done.
    Take care,
    Reuben

  • By Sam - 11:40 AM on April 6, 2015  

    Thanks for the quick and short intro to preprocessors. examples are also simple to understand and grasp.waiting for the second part.

  • By Christina Truong - 12:25 PM on April 7, 2015  

    @FlyDuo Once you start, you’ll wonder why you didn’t start sooner!

    @Sam Part 2 is up! You can find it here: http://blogs.adobe.com/dreamweaver/2015/03/levelling-up-with-sass.html#.VSPMZSgutvA

  • By Gayath - 12:41 AM on May 13, 2015  

    I was lazy enough to start learning unless I found this. This is simple and cover most concepts.. Many thanks for the post.

  • By Giuseppe - 3:17 PM on May 19, 2015  

    Great overview for Less and Sass Christina, I’ve been looking into easing CSS pre-processing into my workflow for a while, but was rather overwhelmed with indecision of where to start. Seeing Less and Sass helped me to see they are not that much different syntactically for basic usage.

  • By Bryan Rieger - 11:26 AM on June 16, 2015  

    Stunned that the latest release of Dreamweaver (CC 2015) STILL doesn’t support proper SCSS formatting (closing braces are all wrong when nested) – let alone compilation. Hint: PLEASE take a look at WebStorm – it’s what one would expect from a modern web IDE. I’m a designer, not a developer so I don’t use 80% of WebStorm – but it’s by far the best IDE I’ve found for working with Sass, Grunt, etc.

  • By Ian - 7:47 PM on June 24, 2015  

    My concern with Preprocessors is coming across compressed CSS I the wild. If I have to work on a clients site and the CSS has been compressed and I don’t have access to the original Sass files, what do I do?

    • By Joe Swislocki - 1:13 PM on August 8, 2015  

      Unminify the CSS. There are many online tools.

  • By sunil - 5:11 AM on August 6, 2015  

    Great Post Christina !
    Thanks, It is very useful for every web designer.

  • By sunil - 5:13 AM on August 6, 2015  

    Great !
    Thanks for the post Christina !!!!
    It is very useful for web designer / Html/css developer.

  • By Mick - 2:36 PM on August 9, 2015  

    A shame that DW STILL doesn’t compile LESS. Lazy is a compliment to the Adobe devs

    • By sunil - 7:19 AM on August 14, 2015  

      right mick !!!

  • By Elmo Allén - 11:49 AM on September 6, 2015  

    Your code here isn’t actually Sass, but SCSS. Sass doesn’t use curly braces and semicolons; instead blocks are made with whitespace indents and declarations ended with newline. SCSS (“sassy CSS”) uses CSS’s markup style, and made so that all CSS is also valid SCSS. I believe this difference could be made more clear in the article, as all the CSS preprocessor beginners have to find out an answer to this question of what is Sass and what is SCSS, and what is their difference.

  • By haroon - 12:21 PM on September 29, 2015  

    Great Post Christina !
    Thanks, It is very useful for every web designer.

  • By Brad - 7:47 PM on November 2, 2015  

    this doesn’t work for me. how do i integrate with HTML files? I linked the css file but no styles work.

  • By Carlos - 2:16 AM on December 4, 2015  

    Nice article!

  • By lorembolo - 10:21 AM on January 6, 2016  

    As Elmo says, you are talking about Sass, but you code shows SCSS.
    Anyway, good article.

    What about autocompile SASS to CSS files in Dreamweaver ?

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

      Still i need to question about that as well… DW Beta 3 has built in functionality but it didn’t work out… Adobe should provide the solution for it to the end-users.

  • By Muhammad Faizan Atiq - 4:55 AM on March 17, 2016  

    Good article! but i was hoping the article will guide on how to use them in Dreamweaver CC 2015 or later.

  • By Saudagar - 4:54 PM on May 30, 2016  

    Awesome yaar, Short, Simple and Helpful Post Christina. Thanks..

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

    Adobe should provide the solution for auto compiling the scss into css… it didn’t work

  • By Matias Santos - 8:52 PM on September 13, 2016  

    Good info, but no preprocessing nor compiling in DW. This kind of thing makes it so hard to complete a project from scratch to final production inside Creative Cloud. We still need third party software like compilers and code editors to work with Scss. We truly would love to get Live Preview AND working our stylesheets with scss both done inside DW. It’s something I don’t get, you may get a lightweight app like “Koala” for compiling, but the massive desktop app DW and the whole Creative Cloud apps cannot get that kind of little useful code inside of them? Adobe has brought tons of useful things to our apps, but this tiny details are what sets it apart.

  • By Vivek - 7:31 AM on October 7, 2016  

    Hi, I just started learning LESS and SASS, info and examples are very good. Understood so easily. Also you could have provided how to compile these to CSS files as well.

    Thanks,
    Vivek