What is Sass? What is [filename].scss?

Sass

Sass is a CSS preprocessor. It turns your .scss files into .css files.

In other words, Sass has its own writing style, its own abilities and advantages. It's almost a distinct language, although it'll be mostly familiar if you've worked with CSS before. It is also universally compatible with web browsers, because it compiles into CSS, which all modern browsers support.*

*(Mostly.)

The Official Sass Guide

http://sass-lang.com/guide (This is a great resource, and pretty much says all there is to say about Sass. The rest of this page will mostly be paraphrasing the official guide.)

What features does Sass have over regular CSS?

Sass has some core features that set it apart from regular CSS:

Variables

In Sass, anything with a dollar sign in front of it is a variable. (Like in a programming language; A variable is just a name, and a useful "value" associated to the name.)

This makes storing, and re-using some CSS values much easier, without having to remember what exactly the value was, you just have to remember the name. This also makes certain custom style choices more obvious when editing the .scss files, such as Refuge Restrooms' custom $light-purple: #8377af ( ) variable.

(compare writing color: $light-purple every time, as opposed to writing color: #8377af every time.)

Most of Refuge Restrooms' variables are defined here: _variables.scss

Import statements

Sass lets you combine several .scss files into one .css file, by importing one file into another. Users of Refuge Restrooms only have to download one CSS file from the server to get all our stylesheets.

In Refuge Restrooms, all stylesheets in our repository are imported into our main stylesheet, application.scss

Mixins

What exactly is a mixin?

A mixin allows you to write one line in Sass, which compiles to more than one CSS rule.

This is often used to prefix a CSS property that has multiple "vendor prefixes."

For example, Refuge Restrooms uses a mixin to substitute something like

@include border-radius: $radius (Sass)

with

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

border-radius: $radius; (CSS)

Refuge Restrooms' mixins are in this file: _mixins.scss