Getting started with Sass: nesting and parent selectors

What is Sass? It is a preprocesser that adds some extra syntax options and functionality on top of CSS, and then it compiles the .scss file to a standard CSS file that will be used in the final web page/app. The way I think about it is that Sass is an enhancement to CSS that gives you extra tools (logic, functions, variables, mixins) and syntax that reads a bit more like other programming languages.

These are my notes on the basics of syntax and functionality (i.e. learning to write Sass), from Mike North's fantastic course and I won't really be covering much in terms of setup. The official docs are a good place to start if you want to learn more than what's covered here: https://sass-lang.com/documentation

Installing and file types

Just briefly touching on this topic, you'll want to add Sass to your project or system (globally) using NPM or Yarn, or use Google for other methods. I'd recommend using the .scss file extension because it's backwards compatible with standard CSS, so to convert an existing project to Sass, all that's needed is to change the file extension, but you can Google 'Sass file extensions' to find out more about this topic.

Nesting

Styles can be nested by declaring them within the block (i.e. before the closing curly brace) of the parent selector, and compiles to CSS as if the selectors are parent, then a space, then child.

.container {
  // styles for the container
  .left-area {
    // styles for the left-area children of container
  }
}

/* compiles to CSS as */
.container .left-area {
  /* styles for the left-area children of container */
}

Another neat feature of Sass is it allows inline comments, but they will not compile to the final CSS, only the /* block comments */ will show up.

It is also possible to use the 'direct descendant' operator in Sass, but it will apply the defined styles to ALL of the children, and can lead to undesirable behavior, so is not frequently used. E.g.

.container {
  // styles for the container
  > .left-area {
    // styles are applied to the left-area, and all its children
  }
}

Parent Selector

The parent selector is the & ampersand, and will insert the name of the style that is the parent scope of the current selector. It can be helpful in adding conditional styles, (e.g. using a class as a flag to apply specific styles, or theming).

.container {
  color: red;
  &.right-nav {
    // styles for the container class only if it also has the right-nav class
   float: right;
  }
}

/* compiles to CSS as */
.container { color: red; }

.container.right-nav {
  float: right;
}

The ability to nest and using parent selectors can make reading Sass a bit more like other programming languages in terms of logical flow and the cascade can be used to override previous styles to create themes and conditional styling.

Next up: Imports and Variables.