Sass: From Beginner to Advanced
4.4 (251 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8,080 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Sass: From Beginner to Advanced to your Wishlist.

Add to Wishlist

Sass: From Beginner to Advanced

Sick to death of cluttered CSS? Let's write fluent, scaleable and intuitive code using Sass.
4.4 (251 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8,080 students enrolled
Created by Karl Hadwen
Last updated 7/2016
English
English [Auto-generated]
Current price: $12 Original price: $40 Discount: 70% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Write professional Sass code that compiles to CSS code confidently.
  • Have improved your CSS productivity tenfold.
  • Understand the concept of DRY (Don't Repeat Yourself) code.
  • Use variables to make your Sass code more fluid and flexible.
  • Understand the difference between dynamic value injection and repeat constructs.
  • Use mixins to reuse perfectly crafted solutions and build upon them so you're not re-inventing the wheel.
  • Understand when to use functions and how to correctly use them.
View Curriculum
Requirements
  • I will cover Mac OS setup and I will also cover Windows setup.
  • You have NO previous knowledge of Sass (SCSS).
  • You should have brief knowledge of how HTML and CSS works.
  • Basic computer skills to install and run applications.
Description

In this course I will be teaching you the complete Sass scripting language. I’ll be taking you all the way from variables right up to writing your own Sass functions. I know it has been preached before in relation to building a course from basic to advanced, but with 39 videos you will surely become a Sass expert in no time! If you really put your mind to it you should be able to finish my course within a weekend, and that includes building your own Sass based projects! The course is structured in a linear fashion that takes you from beginner to advanced methods, so if you feel that you know a little HTML/CSS, feel free to skip a few videos and dig right into the nitty gritty parts of the course!

I’ve covered how to install Sass on both a Mac and a Windows machine and everything within the videos that I have produced should work on both systems. If you do get stuck, I’m only a message away to help. The entire reason we are using Sass is to build reusable and DRY (do not repeat yourself code) code. My primary aim throughout this course is to help you understand how to do this.

If you have any experience from any programming language then you should be able to breeze through this course and learn Sass very quickly. If you’re new to this type of syntax and/or programming, don’t be put off. As I’ve mentioned, I’m only a message away from helping you on your journey (we have all been there!).

You may be asking, why should I take this course? Well…I have the entire curriculum covered and I’m always happy to help any of my students, so feel free to get in touch if anything needs clearing up. I really hope you enjoy this course and learn lots along the way!

Who is the target audience?
  • You already understand basic CSS and want to improve your productivity by using a CSS preprocessor
  • You want to be able to write DRY (Don't Repeat Yourself) code.
  • You want to continue learning and stay on top of current web design trends.
  • You want to be able to write flexible, intuitive and lastly scalable code.
  • You want to be able to re-use existing pre-built code that the Sass community provides to improve your workflow.
  • Web developers and designers who are yet to dive into the world of pre-processors.
Compare to Other Sass Courses
Curriculum For This Course
39 Lectures
01:55:34
+
Introduction & Overview
3 Lectures 09:51

In this video I will be giving an overview of the curriculum of the course.

Preview 04:05

What is a preprocessor and why should we use one, more importantly why are companies adopting them rapidly? In this video we will find out why they're so popular and powerful!

Preview 02:33

What's the difference between Sass and SCSS? Aren't they the same you ask? Isn't one just a scripting language and the other is a standard? Well..let's find out.

Sass vs. SCSS?
03:13
+
Setup
4 Lectures 09:06

In this video I'll be showing you how to install Sass on a Mac.

Preview 01:29

In this video I'll be showing you how to install Sass on a Windows machine.

Preview 01:59

The structure of your Sass project is incredibly important. As your project grows you have to be able to scale intuitively and it's always better to presume these things will happen rather than fix them later.

Setting Up Your Project Structure
02:44

In this video I'll be showing you how to setup Sass watch so that we can compile our SCSS files.

Preview 02:54
+
Sass Concepts
11 Lectures 28:05

Comments are incredibly powerful and useful to ourselves and other programmers, therefore in this video I'll be showing you how to use comments within Sass.

Comments
01:38

Variables are a staple of any language. They might be basic but they're used everywhere. Let's learn more about variables within Sass.

Variables
02:24

To understand Sass or any language we must understand datatypes. In this video I'll be showing you the difference between all of the Sass datatypes.

Datatypes
04:52

SASS allows for mathematical operations such as addition, subtraction, multiplication and division. Having the power to use these techniques is incredibly powerful.

Preview 04:36

Sometimes we want to check the equality of a value within Sass, in this video I will show you how.

Equality Operators
02:23

There will come a time where we will want to compare values, in this video I will show you how and explain why this is useful.

Comparison Operators
01:25

Logical operators allow us to test multiple conditions within a conditional expression.

Logical Operators
01:56

String operations are very powerful when we start getting into more complicated Sass code.

String Operations
01:34

Color operations within Sass are massively important. They're used a lot throughout SCSS and it's imperative you get to grips with them.

Color Operations
01:38

We've seen the & (ampersand) code throughout some of the previous examples. In this video I'll explain the full usage of the ampersand symbol.

& (Ampersand)
02:56

Interpolation allows us to access variables within a string, let's take a look at some examples.

Interpolation
02:43
+
Partials & Imports
2 Lectures 06:10

Partials allows us to split up our code into modular sectors, let's take a look at how we can use partials to improve our code.

Partials
03:00

Imports help us split up our code into modular sectors, lets take a look at how we can do this.

Imports
03:10
+
Mixins & Inheritance (@extend)
5 Lectures 19:29

A mixin allows us to create reusable chunks of CSS. Being able to do this helps us to avoid writing repetitive code.

Mixins
04:46

Lets make our mixins more useful by adding arguments to them.

Mixins With Arguments
04:03

Lets take a look at how inheritance works within Sass.

Inheritance With @extend
04:47

The placeholder selector in Sass is very useful when dealing with parent and child elements.

Placeholder Selectors
01:35

Lets take a look at the difference between extend and mixins.

Extend vs. Mixin
04:18
+
Nesting
2 Lectures 06:45

Nesting is one of the most useful features within Sass, in this video I'll show you the rules of nesting.

Nesting Rules
04:08

Nested properties are really cool and make creating Sass code much more fun!

Nesting Properties
02:37
+
Useful To Know Features
4 Lectures 12:10

Lets take a look at how lists work within Sass.

Lists
01:44

Now we have looked at lists, lets see how we can access data within lists.

Nth Function Within Lists
02:52

Lets take a look at how maps work within Sass.

Maps
04:24

Lets take a look at how the @at-root works within Sass.

At-root
03:10
+
Functions
4 Lectures 08:17

What are functions and why are they useful to us as Sass developers? Well, lets find out in this video!

What are Functions?
02:35

Lets take a look at some of the useful functions that Sass has to offer!

Built-in Functions
02:54

Lets take a look at how we can create our own functions and make even more reusable code!

Creating Your Own Functions
01:25

Now we know what functions are, and now that we have built our own functions, lets go ahead and use them!

Using Your Own Functions
01:23
+
Conditionals & Loops
4 Lectures 15:41

Lets take a look at using @if, @else if and @else.

Using @if, @else if, and @else
05:27

Lets take a look at using @for loops within Sass.

@for Loops
01:42

Lets take a look at using @each loop within Sass.

@each Loops
05:44

Lets take a look at using the @while loop within Sass.

@while Loops
02:48
About the Instructor
Karl Hadwen
4.4 Average rating
251 Reviews
8,080 Students
1 Course
Software Developer

Full stack web developer/designer. Had a few stints working at different web development agencies (and even doing a startup) before moving to London to work at Goldman Sachs. I currently run the YouTube channel: Cognitive Surge - which has over 300 programming videos!

Technical Skills: PHP, Java, JavaScript, jQuery, Node.js, Express, MongoDB (inc/Mongoose), Swift (inc/Sprite-Kit).

Workflow/Tools/UI Skills: REST, Grunt, Gulp, Bootstrap, Foundation, HTML/CSS, Gradle, Git, IntelliJ, Eclipse.