Programster's Blog

Tutorials focusing on Linux, programming, and open-source

Getting Started With Sass

Related Posts

Install Sass

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

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% )
}

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