MEAN Cookbook

Using Sass variables for style reusability

A very handy advantage of using Sass is to define commonly used values in our styles as variables so that they can be easily reused in our project's styling.

Imagine that our Angular application has a very simple two-color theme for its background and text. For our navigation, we simply want to reverse the same two colors of theme for the background and text. With Sass, we can define these colors once and then apply them to the correct properties for the objects we want to style, without copying and pasting hexadecimal color definitions around.