Organizing your project structure with Sass

Every large frontend application needs a robust, scalable CSS architecture. A CSS preprocessor is indispensable--it helps to write cleaner, modular code with reusable pieces and maintain large and complex style sheets. A CSS preprocessor is basically a scripting language that extends CSS and compiles it into regular CSS. There are three primary CSS preprocessors today: Sass, LESS, and Stylus. As per Google Trends, Sass is the most used preprocessor today. Sass mimics the HTML structure and lets you nest CSS selectors that follow the same visual HTML hierarchy. With CSS, you would need to write this:

.container {
  padding: 5px;
}

.container p {
  margin: 5px;
}

With Sass, you can simply write this:

.container {
  padding: 5px;
  p {
    margin: 5px;
  }
}

Sass is backward compatible with CSS, so you can easily convert your existing CSS files just by renaming the .css file extension to .scss.

While nesting CSS selectors, you can use the handy & symbol...