Learn SASS and SCSS

In this chapter we will learn one of the most basic, yet most powerful, abilities of SASS, which is nesting. With nesting, we can save time writing code and make code easier to read by placing CSS Hierarchy within the nests

Dave introduces the concept of nesting and creating a new SASS project.

Learn how to set up a SASS Project in terminal. Also go over BEM notation (http://getbem.com/)

Dave explains how nesting works and shows how nested elements are interpreted in CSS.

Explain some cases where you would need to call back to the parent (pseudo elements) and explain how to do so.

Using the previous lessons as a skeleton, Dave will show you how to complete a number of items to finish the vCard.

In this chapter, we will be taking our existing styles and separating them into different files specific to their location. This will allow us to better handle larger css files by focusing in on what part we need to work on.

Introduce the concept of segmenting files in SASS.

Begin by creating a folder with our base styles. This will hold styles only for top level elements. Dave also goes over using @import.

Create a second folder called components that will hold all of the layered elements.

For this lab you will need to segment the code into specific files and then make sure that the code is properly nested.

Recap on separating lines of code into different files

In this chapter we will begin working with variables to help with updating larger frames of code as well as saving values that we find useful throughout the CSS file.

Introduce the concept of variables and specify how they'll be used in SASS.

Create Variables in the main SASS file that will be used throughout all of our SASS files.

Create variables in separate SASS files and go over it's interaction with other files.

Overview of working with variable scope, global vs local variables, and how they relate to SASS.

In continuation with the previous chapter, users will look for places where they can add variables in their existing lab as well as adding new sections to the page.

Recap the benefits of using variables.

In this chapter we will be working on understand what a Mixin is, their purpose in SASS, and how they're used. After, we will delve a bit into placeholder and plugins, which extend the power of mixins.

Introduce what a mixin is and explain how they encapsulate everything we've gone over so far.

Talk about Bourbon, a SASS library that has a number of mixins already created.

Talk about how we can use math functions to return certain values that we can use throughout the rest of our site.

The final part of our landing page project, we'll use mixins and placeholders to add some extra functionality to our code. We'll also add Bourbon and import the gradient mixin for easier styling.

Recap the three versions of mixins and when to use each.

In this final chapter we will review some of the best practices from the earlier chapters, learn about some resources that are available to those looking to learn more about SASS, and create one final project to wrap up.

Begin by downloading an existing project and begin building out our nested components. While building out each nest, go over best practices.

Review segmentation and separate files and talk about how to better lay out a SASS project's file structure

Review variables and practices on when you should use them, where you should place them, and specific naming conventions.

Review mixins and talk about when it's best to use them and scenarios when you should avoid mixins