Getting Started With Sass

Related Posts

• Getting Started With Less

Install Sas

sudo apt update \
  && sudo apt install build-essential \
  && sudo apt install -y ruby-full rubygems \
  && sudo gem install sass

Updating

Every now and then you might need to update with:

sudo gem update

Convert SASS Directory To CSS

The following command would convert the files in a folder called scss into the css directory at the same level.

sass --update scss:css

Watching Sass Files For Changes

You can manually set up your machine to watch Sass files for changes and automatically update/generate the CSS files for them. For example copy and paste the following into a file called style.scss.

.myClass {
    padding: 1rem;
    background-color: grey;
}

Notice how it's exactly the same as CSS? SASS is just like LESS where pure CSS is still valid SASS, which makes converting legacy code much easier.

Now use the following command in your CLI to watch the file for changes and automatically generate the CSS for it.

sass --watch style.scss:style.css

You should get the following output:

>>> Sass is watching for changes. Press Ctrl-C to stop.
      write style.css
      write style.css.map

... and see your new style.css file.

If you edit your style.scss file in a text editor, then you should see your CLI output the following, showing that it updated the relevant CSS file.

...
>>> Change detected to: style.scss
      write style.css
      write style.css.map

Manually setting up to watch a single file at a time is pretty dumb, and you probably want to separate your SASS files from your generated CSS files. To watch a directory of SASS files for changes and generate the CSS files into a CSS directory, use the same command on a folder:

sass --watch my-sass-folder:my-css-folder

You could use relative or absolute paths. You don't have to run the watch from the directory containing the folders.

Sass Capabilities

Nesting

Sass is just like LESS in its ability to handle nesting. In my opinion this is the best feature of both tools. For example:

.myOuterDiv {
    .myDivWithinTheOuterDiv {
        padding:5px;
    }

    .anotherDivWithinOuterDiv {
        margin: 5px;
    }
}

That is the same as:

.myOuterDiv .myDivWithinTheOuterDiv {
    padding:5px;
}

.myOuterDiv .anotherDivWithinOuterDiv {
    margin: 5px;
}

Variables

Variables are the second most useful feature available in both LESS and SASS. Sass is different from LESS in that it uses a $ symbol (like PHP) instead of an @ symbol like so:

$baseFontSize: 12px;

a {
  font-size: $baseFontSize;
}

Just like LESS, Sass also supports operators, which make variables even more handy. For example, I like to define a relationship between my headers like so:

$baseFontSize: 1rem;
$factor: 1.1;

body, p {
    font-size: $baseFontSize;
}

h3 {
    font-size: $baseFontSize * $factor;
}

h2 {
    font-size: $baseFontSize * $factor * $factor;
}

h1 {
    font-size: $baseFontSize * $factor * $factor * $factor;
}

Color Functions

Sass also has a bunch of functions to change colours for you. This is useful for things like darkening/lightening links/buttons as you hover over them. You don't care what the color is originally, you just want it to darken when hovered over.

$baseColor: green;

a {
    color: $baseColor;
}

a:hover {
    color: darken($baseColor, 10% )
}

Importing / Including

When you have a lot of SASS for a large project, it's nice to break it up across multiple files and compile it into one. For this you can use @import. I generally have a top level app.scss or style.scss that will just import all my other SASS stylesheets like so:

@import "foo";
@import "subfolder/bar";

Changing Output Style

Be sure to try the following style options to have your outputted CSS styled the way you like it:

• --style=nested
• --style=expanded
• --style=compact
• --style=compressed

More info on styles can be found here.

Conclusion

I have only covered the basics. There is plenty more you can do with SASS. Just do me a favour and start using Sass or LESS in your projects, I don't care which, just stop using pure CSS as it gets really messy and unmanageable.

References

• DigitalOcean - How To Set Up Sass on your VPS Running on Ubuntu
• Sass Guide