Within Middleman there is no active compilation from SCSS to CSS files. Middleman watches changes in this folder which is reflected in the browser by LiveReload. When making a build, the scss files are converted to css files. In the css folder we see there are several folders with files. This is the order they are included:
1 Vars (variables)
Variables are reusable values which take care of style consistency and allow for easy changing of patterns. Variables only live in SCSS files (not in CSS) and the files do not contain CSS selectors
Abstractions are reusable pieces of CSS, often called Mixins as well. With abstractions we can avoid repeating selectors throughout the CSS. Just like variables this folder never contains any CSS selectors.
Here we specify the responsive grid in which we positioning all components and modules.
Base styles define the default look for HTML. These rules will generally be made up of element selectors for HTML elements such as headings, paragraphs and lists.
Components are elements that are used across the site and are not limited to a specific block, section or page. So components must not be specified with parent wrappers.
Modules are specific blocks, pages and sections on the site. These styles are usually not exchangable with other modules and/or pages.
There are some styles needed for the styleguide only, which will not be used on the site itself. We list these styles here, so we can easily extract them from the production build.