Front End Developer @RepEquity
Connect with me on Twitter @SirJessTheBrave
SASS stands for Syntactically Awesome Style Sheets and is a CSS pre-processor that allows you to use programmatic functionality and better organize your CSS.
Read all the SASS documentation at sass-lang.com/
SASS takes your .SCSS files, and compiles them into a normal css style sheet to be included in your project.
SASS is organized into folders with smaller .scss files called partials. The meat of your SASS files will be your Components partials. The functionality of SASS comes from the Base partials.
Modular sections of you page. Repeatable bits of code. For example: Header/Footer, side-bar, display for blog articles, hero images, ect.
Sass requires an installation process as well a compiler such as gulp or grunt to run. To save time we will be using Cloud 9 to spin up an environment with all the dependencies we will need.
SMACSS stands for Scalable and Modular Architecture for CSS and is a way of organizing one's css is a more reusable and sectioned out way. It is NOT a library or framework, but a way of styling and organizing your css. It was written by Jonathan Snook and is freely available on-line.
Get the free SMACS Online book at SMACSS.com
Base: The most basic layout of your page/site
Layout: Holding one or more 'modular' sections together
Module: Reusable chunks of code
State: The look of a particular module while in a certain state such as hover, active, expanded, on mobile
Theme: Often not required, but describe how the modules or layouts might look
Naming conventions are very important to writing clean, well understood code. This is only a sample of how you COULD do naming conventions - the key is to define and stick with a convention
SASS has a folder structure that is parsed out into categories and smaller functional components, which works really well with SMACSS theory. It also is necessary to have good naming conventions in your variables, mixins, and extendibles for clean, clear, readable SASS