Sass Imports and variables

Imports

CSS allows imports, but requires a new round-trip HTTP request, which can be a performance concern. Sass handles this differently.

Files that have the underscore in front of their names are known as "partials", which are designed to be imported into other .scss files. They will not become their own CSS files after Sass is compiled. Import is not limited to partials, it can be pointed to other .scss files, folders, or even libraries by pointing it to the appropriate node_modules folder, and importing.
Import statements are written as @import, and the name of the file or library in quotes, followed by a semicolon. No file extension is necessary, and the paths are relative.

@import '_variables';

Variables

Variables are declared using the dollar sign at the beginning of the name, followed by a colon, and the value. E.g.

$error_color: #f00 !default;

In the example above, !default translates to "if error color has not been defined elsewhere." So if the variable $error_color has been assigned previously, it will not override it.
Note that the exclamation point is not a negation operator -- it has a different definition in Sass than it does in most programming languages.

Variable Scope and Manipulation

Note that, similar to let in JavaScript, variables are only available in the scope in which they are defined (the curly bracket set) and its children, but variables defined inside a child scope are not available in the parent.
Simple arithmetic can also be used with variables, and Sass will handle typical unit conversion for you, as long as it's possible (e.g. rem to pixel cannot be converted because of how rem are calculated, but percent to decimal works fine).

Types

There are 5 types in Sass:

• Numbers (10, 200px, 50%, 14pt)
• Colors (#FFF, rgb(255, 0, 0), red)
• Strings ("a.png", url("a.png"))
• Booleans (true, false)
• Lists (e.g. border-radius has several space-delimited values in a specific order, which is a list. Similar to an array in JS)
• Maps (key: value pairs similar to objects in JS)

String Interpolation

Interpolation in Sass uses the octothorpe and curly braces: #{hue(green)}
Comments have another feature handy for debugging, which is that they can be used along with interpolation, and the output can be viewed in the CSS file to see what values are actually being used after compilation. Note that block level comments must be used for them to appear in the CSS file:

/*
Error color is #{error_color}
Hue is #{hue(green)}
#{2px * 2}
#{2rem * 2px}
*/

compiles to:

/*
Error color is #f00
Hue is 120deg
4px
*/

There are few limits to what can be used with interpolation, and if it's not possible, it won't compile to valid CSS, so it can be checked in the manner outlined above. If nothing appears for the interpolated value, it cannot be interpolated. It won't throw an error and break your CSS, but nothing will appear where the interpolated value was supposed to be (as in the last line of the comment block in the example above), so best to find a workaround or hard code it.

Combining imports and variables

To maintain separation of concerns and fewer lines of code in the main Sass stylesheet, separate partials (files beginning with underscore) can be created to hold all variables (and other things, covered later), and then imported into the main file, which gives access to everything defined in the partials. An example of how this might work well would be a team defining a specific palette of colors in a _variables.scss file, and then universal variable names can be used in the stylesheet without having to remember the specific color (e.g. primary, secondary, accent, primary_border, etc.). If a change is needed, changing it once in the variables partial will then be immediately applied to the entire app.