Member-only story
Understanding front-end frameworks: CSS frameworks
After looking at component-based frameworks that combine HTML and JavaScript in the previous post, it’s now time to shift our attention towards that other cornerstone of web technology: CSS.
Just like HML (content) and JS (logic) CSS or “Cascading Style Sheets” is designed for separation of concern in web technology. CSS enables the separation of content and presentation, making presentation more flexible and adaptive, reducing code complexity and repetition, and (because of caching) improving page load speed.
Sass / SCSS
Sass (Syntactically Awesome Stylesheets) is a popular CSS preprocessor. It compiles .sass or .scss (Sassy Cascading Style Sheets) files into native CSS code that will work across any browser. The difference between the two file formats is mainly syntax. The SCSS syntax is basically a superset of CSS, so it’s the easiest syntax to get used to and the most popular.
The biggest advantage of SCSS is that it adds features to CSS code that are not available in the CSS standard, like nesting, variables and “mixins” (groups of CSS declarations that can be reused throughout the stylesheet). For instance:
$primary-color: #6fda44; /* Stores the value #6fda44 in a variable */
.button {
background-color: $primary-color;
/* Uses the…
