CSS is anything but DRY (Don’t Repeat Yourself).

We’re constantly writing the same snippets of code for colors, fonts, and frequently-used patterns of style throughout our stylesheets. This means that CSS stylesheets can be immensely repetitive: Colors, fonts, oft-used groupings of properties, etc.

As interfaces and web applications become more robust and complex, we’re bending the original design of CSS to do things it never dreamed of doing. Here comes Sass (Syntactically Awesome Stylesheets) to the rescue!

Sass is a CSS preprocessor—a layer between the stylesheets you author and the .css files you serve to the browser. Sass plugs the holes in CSS as a language, allowing you to write DRY code that’ll be faster, more efficient, and easier to maintain.

So while normal CSS doesn’t yet allow things like variables, mixins (reusable blocks of styles), and other goodies, Sass provides a syntax that does all of that and more—enabling “super functionality” in addition to your normal CSS.

Objectives for this class are:
• Understand the benefits of Sass in web design
• Advantages of modularizing your CSS with Sass
• How to compile Sass code and integrate in existing web projects
• Learn the style guide of writing Sass code
• Know the basic building blocks of Sass: variables, mixins, condition logic, and functions

Applicable Job Roles: web designers, webmasters, web programmers, and web application developers, and any IT related job

• History of Sass
• CSS Pre-processors
• Sass vs SCSS
• Sass style guide
• OOCSS (Object Oriented Cascading Stylesheet)
• Compiling Sass:
  • Compilers in web editors
  • GUI-based tools
  • Compiling manually

• Creating variables
• Working across multiple files
• Building mixins
• Using pre-built mixin libraries

• Creating values using functions and operators
• Building site themes using functions
• Constructing layouts
• Using inpterpolation
• Working with @extend directive

• Converting existing projects to use Sass
• Incorporating CSS grids
• Applying Sass to frameworks (ie. Bootstrap)