Categories
CSS

SASS Basics 2018

SASS, Syntactically Awesome Style Sheets, can save you tons of time and stress.

Perhaps the main appeal of a CSS preprocessor like SASS is that it allows you to write CSS more concisely, with a lot less of the repetition that comes with “typical” CSS workflows. Preprocessors make CSS more like a programming language, allowing variables, functions, math, loops, includes, etc.

SASS partials allow us to “break up” our stylesheets into separate files and have SASS compile them. This is exceptionally useful for keeping your code modular and organized. It’s also very useful for teams working on the same site: different designers/developers can independently code different modules.

AListApart.com’s take on getting started with SASS is a good introduction to the topic.

SASS is typically used from the command line, although there are some applications to use it for the command-line-averse. One good free one, called Scout, is available for both Mac and Windows. A full-featured app is CodeKit (Mac-only, however).

However, the amount of command line comfort needed can be picked up very quickly, as you can do what you need to do with only a few commands.

Start by reading the Designer’s Guide to the OS X Command Prompt: a Tutorial for the Modern Web Designer and you’ll be fine.

Setting Up SASS on a Macintosh

There are a number of ways to run SASS, so it’s important that you are clear which method you plan to use.

Until recently, a lot of advice on setting up SASS that you might find on the web suggested using the Ruby implementation. However, as of 2019 development of Ruby SASS has ended, so it’s really not worth the effort to set it up that way.

A better method is to use SASS as part of a build project like Gulp.

Setting up A Gulp Process to Compile SASS

To run Gulp,js, you must have node.js and the gulp.cli package installed on your computer.

To set up a gulp task and watch process, go through the steps in these two exercises:

The Basics of SASS

A concise and simple guide can be found at https://sass-lang.com/guide

SASS File Structure

An excellent explanation of how you can use SASS to break your production into nicely organized chunks, mainly through the use of partials that compile into a single main stylesheet can be found here:

https://www.sitepoint.com/architecture-sass-project/

Even if you only use partials, and no other SASS feature, it’s worth the time it takes to learn how to do it.

A common technique is to assemble a library of partials for things you use in all or most projects. Saving them as partials allows you to quickly compile them into a single CSS file with each newproject. Here I’m thinking about reset files like normalize, grid files, typographic scales, responsive code (like that needed for responsive YouTube videos), clearfix, etc.

Another very useful article discusses using SASS with WordPress and the Underscores starter theme:

https://www.creativebloq.com/web-design/switch-css-sass-wordpress-71515681

Additional Information: