Library

Course: Learn SASS and SCSS

Learn SASS and SCSS

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

As a developer, you know the importance of CSS and you also know how CSS can become cumbersome, disorganized and repetitive. Maybe your CSS performs poorly, or, maybe your just spending too much time digging through CSS code to solve minor display issues.

Stop wasting time tearing your hair out over confusing or poor performing CSS.

With Learn SASS and SCSS with Dave Moran, you'll be introduced to to the technologies of SASS (Syntactically Awesome Style Sheets) and SCSS (Sassy CSS). If you're not familiar with these important advances in the CSS world, SASS is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed, and turned into regular CSS style sheets. SCSS is a super set of CSS, expanded to accommodate the features of SASS. SASS can be used with any version of CSS and all CSS libraries are compatible.

In this course you'll do more than watch demonstrations from an expert instructor. Dave will invite you to code along as you go from SASS newbie to expert. You'll complete this course ready to integrate SASS workflow and SCSS syntax in to your own development projects. To insure that you retain the information presented, Dave has prepared several code exercises to help you get the hang of things.

With over 1,000,000 enrollments world wide LearnToProgram brings you instructors who are teachers first, our instructors are able to take complex technical information and make it understandable for just about anyone. Dave Moran is no exception and you will find his teaching style to be both comfortable and immediately understandable as you learn SASS and SCSS.

Welcome to Learn SASS and SCSS with Dave Moran. See you in class!

Who is the target audience?

  • Web Developers and Designers
  • Front End Developers
  • Software Engineers
Basic knowledge
  • You should have fundamental knowledge of HTML and CSS
  • You should be able to use your PC or Mac operating system
What you will learn
  • Set up a SAAS project
  • Understand and apply SAAS nesting
  • Use and apply the concept of Segmentation
  • Integrate SAAS Variables in to your Work
  • Understand SCSS Mixins and SCSS Functions
  • Create your Own Mixins
  • Know and apply Best Practices
Curriculum
Lectures quantity: 39
Common duration: 03:12:52
Introduction to SASS
  • Meet your Instructor  

    An Introduction to your instructor, Dave.

  • Welcome to SASS  

    Welcome to the course! In this video you will see screenshots of the final projects that we'll be building.

  • Course Layout  
  • Installation (Mac)  

    Step-By-Step instructions on how to install on Mac.

  • Creating a New SASS Project  

    Create the folder that will house our first SASS project to be ready for the next chapter.

  • Wrap Up: Introduction  
Let's Make a Nest: Nesting With SASS
  • Introduction  

    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

  • Building a Nest  

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

  • Create a Project  

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

  • Nesting + Inheritance  

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

  • Calling the Parent  

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

  • Building a vCard  

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

  • Cleaning Code with Segmentation  
Separation is Natural: Segmenting our Code for Cleaner SCSS
  • Introduction to Segmentation  

    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.


  • Why Segment  

    Introduce the concept of segmenting files in SASS.

  • Segmenting Core styles  

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

  • Segmenting Elements  

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

  • Building a Landing Page, Part 1  

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

  • It Varies  

    Recap on separating lines of code into different files

Varied Sassyness
  • Introduction to Working with Variables  

    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.

  • Working with Variables  

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

  • Variables in the Main SASS file  

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

  • Variables in local SASS files  

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

  • Variable Scope: Global vs. Local  

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

  • Building a Landing Page, Part 2  

    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.

  • Advanced SASS  

    Recap the benefits of using variables.

Mixins, Placeholders, Plugins, Oh My
  • Let's mix it up  

    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.

  • What are mixins?  

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

  • What is Inheritance?  
  • Plugins: Bourbon  

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

  • Functions in SASS  

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

  • Building a Landing Page, Final  

    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.

  • Best Practices  

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

Final Chapter: Best Practices
  • Best Practices - Introduction  

    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.

  • Best Practices: Nesting  

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

  • Best Practices: Segmentation  

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

  • Best Practices: Mixins  

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

  • Landing Page Audit  
  • Congratulations  
reviews (0)
Average rating
0
0 voices
Detailed rating
5 stars
0%
4 stars
0%
3 stars
0%
2 stars
0%
1 stars
0%