SASS and CSS PreProcessors

https://sass-lang.com/guide

CSS preprocessors create files that compile down css that can be run in the browser and add functionality to CSS. For instance in SASS you can save variables, nest css identifiers, create inheritance structures and do mathematical operations... among other things. There are a number of different CSS preprocessors, SASS and LESS being the most well known. I think they generally do similar things but SASS is implemented in ruby and LESS is implemented in Javascript.

SASS - Syntactically Awesome Style Sheets

To use SASS you simply name css files with the .scss or .sass extension then use a compiler somewhere in your production line to turn it into browser readable css. The most straightforward option is to simply use the command line:

>>> sass ./index.scss ./index.css

Variables

You can store variables and re-use them for reptitive styles, $ indicates a viariable name. like so:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

You can nest selectors in ways that make more sense. For instance if you have a nav bar you can do something like this:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

instead of calling them all individually. Actually when you compile this to css is looks like this:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

Partials

If you name a file with a leading underscore, like _example.scss it can imported as a partial file. This can let you create blocks of css that you can re-use between multiple files and sites.

Imports

There is a native import feature in css, however each import statement will trigger another http request. With sass, you import statements will combine all the files into 1 to minimize http requests.

// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

```scss // base.scss

@import 'reset';

body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Mixins
========

Mixins work almost like functions.  They let you define a set of css declarations and even allow you to pass in a variable argument.  This can make doing very repetitive things, like writing the same 5 lines to rotate an object a certain number of degrees to the right, much DRYer.

```scss
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

Extend/Inheritance

Inheritance let's you define a placeholder class that lets you add everything in it to whatever other classes you'd like. It lets you DRY up your code when there are multiple classes that only need small variations of css difference. It let's you avoid naming the same elements with multiple classes in your html.

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

The above compiles to:

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

.error {
  border-color: red; }

.warning {
  border-color: yellow; }

Mathematical Operations

SASS includes support for mathematical operators like + - / * % and others. This can very helpful in determining proper width's and sizes for elements on a page.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}