CSS Sass with Dart: Install, Setup, Usage, & Organize Files

2019-06-01

Syntactically Awesome Style Sheets ("Sass" for short) extends CSS with its rich features adopted from traditional programming and is a CSS preprocessor that compiles into CSS. What do we mean by that?

  • extends: Sass includes features in traditional programming language, such as variables (one of many!)
  • features: see below for the list of features
  • preprocessor: compiles Sass files (.scss) into CSS files (.css)
  • compile: transforms code from one language to another language on the same abstraction level
    • YES, CAN DO THIS: Sass .scss => CSS .css (makes sense!)
    • NO, CAN'T DO THIS: Sass .scss => JavaScript (makes no sense!)

Sometimes, you'll find tutorials that talks about Compass, a deprecated tool for stylesheet authoring. Since it's no longer supported, please do not use Compass anymore.

Up until recently, I use to take pride in writing my CSS raw in notepad, without any help of an editor or pre-processor. I used to use notepad for CSS, and I still think doing this is hardcore and cool. One can learn a lot without the aid of code editor autocomplete. While working on bigger projects that required more CSS lifting, I had no clearly defined structure and tools to keep my CSS in check. That is when I realized that I needed to update my CSS toolkit.

Ever since learning about CSS architecture, such as BEM, and pre-processors, such as Sass, my CSS workflow has improved tremendously. I can't imagine a web development life without Sass!

So let's get started on how to use Sass. I'll be going over how to use Sass in terminal.

In this post:

  • Features
  • Materials
  • Install
  • Setup
  • Usage: Compiling .scss => .css
  • Organize Files

Features

I won't go into the details of the Sass features, since the documentation provides fantastic examples already.

  • Import
  • Inheritance
  • Mixins
  • Nesting
  • Operators
  • Partials
  • Variables

Personally, I find myself using import, partials and variables more often. I also prefer still writing the curly braces ( {} <-- these are curly braces) in Scss rather than namespaced Sass.

Materials

  • Terminal
    • Homebrew
      • Sass with Dart (Dart-Sass) - version 1.20.3 (at the time of this post)
  • Project Files
    • input.scss
    • output.css

Install

First thing's first if you have Ruby Sass installed: uninstall Ruby Sass so you can install Dart-Sass with Homebrew.

# uninstall ruby sass, if installed on your computer
gem uininstall sass
sass --version              # output bash command doesn't exist

# install dart-sass
brew install sass/sass/sass
sass --version              # output 1.20.3 at the time of this post
which sass

Setup

Once you're done installing Sass, you can setup your project files below following this directory folder structure:

# project files

project-directory-name      # project root directory
  |- input.scss
  |- output.css

When running terminal commands in the Usage section below, make sure you're in the project directory.

Usage

Compiling Sass .scss => CSS .css has several ways. I've outlined them here:

  • Manual Compilation
  • Dynamic Compilation
    • Dynamic Compilation with Style Conversion

And shown here what you need to type in your terminal (choose one and test them all for fun!):

# terminal

# manual compile scss => css
sass input.scss:output.css

# dynamic compile scss => css: watch and update SCSS files
sass --watch input.scss:output.css                    # used for watching ONE SASS file
sass --watch app/sass:public/stylesheets              # used for watching MULTIPLE SASS files

# dyanmic compile with style conversion scss => css: expand, compact, or compress
sass --watch --style expand input.scss:output.css     # expand nested => expand
sass --watch --style compact input.scss:output.css    # compact => compiles css into one-liner
sass --watch --style compressed input.scss:output.css # compress => compiles removes all spaces and line breaks (think of minified css)

sass input.scss:input.css

  • take note:
    • input scss => input.scss
    • output css => output.css
  • this command generates: input.css.map

--watch => used during development like a server, need to turn off - compiles Sass

  • Sass watches the input.scss file and updates the output.css

Organize Files

To me, the most important question when learning a new tool is, how do I organize my files? Organizing files saves me time, especially when I need to reference the file at a later date.

There are several ways of organizing files. I won't share them here, since there are already other posts that have put together a great list.

The most important thing about organizing files is to work with your team on file structure needs and work from there.

Sources