Learn SASS and SCSS
3.9 (82 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
467 students enrolled

Learn SASS and SCSS

Supercharge your CSS! Unleash the Advantages of CSS Pre-processing with SASS and SCSS.
3.9 (82 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
467 students enrolled
Last updated 7/2019
English
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 article
  • 31 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 42 lectures 03:19:33
+ Introduction to SASS
7 lectures 23:22

An Introduction to your instructor, Dave.

Preview 00:44

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

Preview 01:11

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

Installation (Mac)
01:53

Step-By-Step installation on Windows

Installation (Windows)
11:53

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

Creating a New SASS Project
06:11
Wrap Up: Introduction
00:24
+ Let's Make a Nest: Nesting With SASS
7 lectures 36:40

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

Introduction
00:36

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

Building a Nest
03:09

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

Create a Project
05:25

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

Nesting + Inheritance
12:05

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

Calling the Parent
08:46

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

Preview 06:04
Cleaning Code with Segmentation
00:35
+ Separation is Natural: Segmenting our Code for Cleaner SCSS
6 lectures 28:00

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.

Introduction to Segmentation
00:40

Introduce the concept of segmenting files in SASS.

Why Segment
02:32

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 Core styles
07:39

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

Segmenting Elements
04:43

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

Building a Landing Page, Part 1
11:54

Recap on separating lines of code into different files

It Varies
00:32
+ Varied Sassyness
7 lectures 33:09

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.

Introduction to Working with Variables
00:40

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

Working with Variables
03:14

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

Variables in the Main SASS file
07:24

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

Variables in local SASS files
08:40

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

Variable Scope: Global vs. Local
02:39

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.

Building a Landing Page, Part 2
09:57

Recap the benefits of using variables.

Advanced SASS
00:35
+ Mixins, Placeholders, Plugins, Oh My
7 lectures 37:06

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.

Let's mix it up
00:37

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

Preview 06:18
What is Inheritance?
08:11

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

Plugins: Bourbon
06:37

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

Functions in SASS
07:06

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.

Building a Landing Page, Final
07:47

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

Best Practices
00:30
+ Final Chapter: Best Practices
7 lectures 40:34

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.

Introduction
00:32

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

Best Practices: Nesting
09:02

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

Best Practices: Segmentation
09:14

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

Best Practices: Variables
05:20

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

Best Practices: Mixins
07:59
Landing Page Audit
08:12
Congratulations
00:15
+ Bonus
1 lecture 00:41
Bonus Lecture
00:41
Requirements
  • You should have fundamental knowledge of HTML and CSS
  • You should be able to use your PC or Mac operating system
Description

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 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 this course is for:
  • Web Developers and Designers
  • Front End Developers
  • Software Engineers
  • Developers looking for better Web Site Performance