The Complete Sass & SCSS Course: From Beginner to Advanced
4.5 (2,180 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.
18,990 students enrolled

The Complete Sass & SCSS Course: From Beginner to Advanced

No more cluttered CSS! Realize clean designs lightning-fast and without frustration using Sass & SCSS.
4.5 (2,180 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.
18,990 students enrolled
Last updated 5/2016
English
English [Auto-generated], French [Auto-generated], 7 more
  • German [Auto-generated]
  • Indonesian [Auto-generated]
  • Italian [Auto-generated]
  • Polish [Auto-generated]
  • Romanian [Auto-generated]
  • Spanish [Auto-generated]
  • Thai [Auto-generated]
Current price: $129.99 Original price: $199.99 Discount: 35% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 1 article
  • 30 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
  • Write professional Sass code and generate CSS code from it.
  • Realize designs much faster with less frustration.
  • Use variables to make designs more flexible and avoid repetitive code.
  • Use mixins to reuse existing solutions and built upon them without re-inventing the wheel
  • Use functions and operators to calculate flexible dimensions, colors and more.
  • Import fonts and existing Sass files into new designs to reuse them.
  • Use Sublime Text 3 confidently to write Sass code swiftly.
Course content
Expand all 41 lectures 04:02:48
+ Introduction - Welcome To The Complete SASS & SCSS Course!
3 lectures 04:06

Welcome to The Complete Sass & SCSS Course: Beginner To Advanced! In this lecture students will learn about out course, a special welcome, and how to contact us if they have addtional questions throughout our course!

Preview 01:58

In this lecture students will learn a brief overview of what they can expect to learn in our SASS & SCSS course!

Introduction Continued: Here is What You Will Learn In Our SASS & SCSS Course!
01:14

In this lecture students will learn the best ways to follow along and use this course to learn the most about SASS and SCSS

How To Follow Along and Use This Course
00:54
+ Sass Overview
2 lectures 08:53

A preprocessor like Sass build on CSS and enhances it with powerful capabilities like variables, nested selectors, and different generation options.

Sass & SCSS will make your code more maintainable and flexible so that you can reuse it more easily for other projects. You will also be able to tailor and modify your designs more easily.

Preview 04:08

Preprocess what you just learned to create some long-term knowledge.

Preprocessors
2 questions

Sass is the original language with the intent to improve upon plain old CSS. It uses a more clutter-free syntax without curly braces or semi-colons.

SCSS was created later in addition to Sass to provide a more CSS-like syntax. This makes it easier to transition from CSS to SCSS.

Both are equally powerful and add a lot of neat capabilities on top of CSS which you're gonna learn in this course. It is just a matter of taste which of both you prefer but SCSS has become a near-standard. The course lectures use SCSS.

Preview 04:45

Sass or SCSS? Show that you know the difference!

Sass vs. SCSS
2 questions
+ Setup
4 lectures 23:03

Sublime Text is a very powerful text editor that supports a wide range of languages, including SCSS & Sass and all other languages you need for this course. Learn how to install Sublime Text 3 along with Package Control to easily power up your Sublime Text installation with the various available plugins.

Plugins you need for this course: Sass, SCSS, Sass Build, Emmet (optional but highly recommended)

Setting Up Sublime Text 3
08:09

Sass is available as a Ruby gem, which means that you need Ruby to install it. This lecture guides you through the installation steps for Ruby and Sass. Afterwards, you're gonna have all the tools you need for this course! Good feeling!

Installing Sass / SCSS
04:18

Check if all plugins for Sublime Text have been installed correctly. This lecture shows you how to create your first Sass file, try out the Emmet plugin and generate CSS code using the Sass Build plugin.

A Quick Test
04:38

Set up a simple static HTML site project with a separate CSS directory and configure the Sass Build plugin to write the generated CSS code into that CSS directory. Also, install the SublimeBuildOnSave plugin to update the CSS file automatically on every save.

Setting Up The Project Structure
05:58
+ Variables
2 lectures 12:40

Sass variables can store any kind of CSS values, such as colors, lengths and fonts. They can be created as follows in SCSS syntax: $variable: [value];

Preview 04:02

Keep your variables organized using comments to make code more readable.

You can use variables whenever you want to make a value easily changeable or whenever you use the same value at different places. Creating a variable for them makes the code more maintainable because changes can be done at a single place (the variable declaration).

Using Variables Correctly
08:38

Show your invariable knowledge of variables in Sass!

Variables
2 questions
+ Partials
1 lecture 06:52

Partials allow you to define SCSS / Sass files that are not translated to CSS code.

This is usefor for various purposes. For example, partials are commonly used to define all variables (in one or more partials), to define a reset partial to include in your main layout, and in fact anytime you do not need a CSS file to be generated.

Partials
06:52

Do you have non-partial knowledge of partials in Sass?

Partials
4 questions
+ Mixins
3 lectures 24:28

Mixins let you define reusable chunks of code that you can then use throughout all your projects. Mixins are one of the most important and powerful features of Sass and there are countless frameworks which also define useful mixins for you to discover.

You can also use mixins inside other mixin definitions to build on top of designs you already defined.

Mixins in Sass
08:18

Can you mixin some knowledge to solve this quiz?

Mixins
3 questions

Make your mixins more flexible by using arguments.

You can define as many arguments as you want for a single mixin to pass in values like colors, sizes or fonts. Default values give you the choice to pass in those values or use some predefined default value.

When passing in arguments in the @include directive, you can use explicit names to make the code more readable. When using explicit names, you can pass in the arguments in any order you want.

Mixins with Arguments
11:32

Can you deal with arguments (in Sass)?

Mixins with Arguments
4 questions

You can use @content to pass in content to mixins. This is useful, for instance, to create mixins which apply a given style only to a specific browser.

When including the mixin, you can then define any styles you want inside it. These are then going to be inserted wherever @content is placed in the mixin definition.

Passing Content Into Mixins
04:38

Can you handle @content in @mixins?

Mixins with Content Blocks
2 questions
+ Imports
2 lectures 11:57

Sass imports are an extension of normal CSS imports. In fact, there are four cases where Sass import are translated to CSS imports:

  1. When the import starts with url()
  2. When the import starts with http://
  3. When importing a CSS file, e.g., @import "filename.css";
  4. When using a media query

In addition, Sass imports allow you to import Sass & SCSS files. If none of the above cases is true, Sass will look for a Sass / SCSS file, just like when we imported the partials.

Imports in Sass
06:54

Test your knowledge on Sass imports!

Imports
2 questions

Bring together the power of mixins and imports to create a neat little mixin to import fonts from Google Fonts. The mixin just takes in the name of the font you want to import and handle the rest for you. No need to look up the URL yourself, no need to open up Google Fonts (if you know your fonts).


Put this mixin into your toolbox of reusable mixins for future projects!

Practice Activity: A Mixin to Import Fonts
05:03
+ Media Queries
2 lectures 10:39

Media queries allow you to define styles which should only be applied to a certain medium or a medium with certain properties. This is also available in CSS and is essential for responsive design.

In Sass, you can add the @media tag at any nesting level to include a media query that is only going to apply to the element you are targeting.

Nested Media Queries in Sass
05:19

Can you handle nested @media queries?

Nested Media Queries
2 questions

Combine mixins and media queries to create a powerful framework for addressing different screen sizes. Learn how more sophisticated frameworks provide the ability to target different devices and create truly responsive designs.

Practice Activity: Mixins & Media Queries
05:20
+ Operators
2 lectures 07:56

Sass allows you to perform calculations on values of different types, such as 1in - 12px. This is really useful in many cases to calculate dynamic dimensions for flexible layouts.

There are also some incompatible units such as em and px, so you cannot perform calculations like 1em + 4px. Also, make sure the end result of the calculations is a valid CSS unit. For example, 2px * 3px = 6px*px which is not a valid CSS unit (what's a "square pixel"?)

Basic Arithmetic & The Sass Shell
04:42

Learn how Sass handles color calculations. You can perform calculations from simple additions like #123456 + #654321 = #777777 to more complex expressions like #222 * #030201 = #664422.

Don't worry: Sass provides powerful and easily usable functions to handle color manipulations. So you won't usually perform calculations like these directly.

Color Arithmetic
03:14

Test your arithmetic, Pythagosass!

Arithmetic in Sass
3 questions
+ Functions
3 lectures 18:54

In essence, Sass functions take in arguments, perform some computation, and then return a value. Some functions are also available in CSS, such as the function rgb($red, $green, $blue) which returns a color made up of the RGB components passed in.


But Sass provides many more powerful functions than CSS and even allows you to create your own as well! In the following lectures, you'll get to know some of the most useful built-in Sass functions and also learn how to create your own.

What Are Functions?
03:07

Learn how to use four of the most useful Sass functions to manipulate colors:

  1. darken($color, $amount) to darken colors
  2. lighten($color, $amount) to lighten colors
  3. opacify($color, $amount) to change the opacity of colors
  4. transparentize($color, $amount) to also change the opacity/transparency of colors (opposite of opacify)


These functions are extremely useful to define hover colors, transition colors, or generally define colors based on an existing other color.

Built-in Functions
06:04

Creating custom Sass functions is not too difficult, even if you're not a programmer. It's really worth learning it to be able to encapsulate your logic in a reusable way -- just like frameworks do.

Knowing how to create functions using @function in Sass brings you one step closer to being able to write your own powerful frameworks and leave your competition behind.

You create a function using the @function directive and can define a return value after the @return directive.

Creating Your Own Functions
09:43

Test your knowledge on functions in Sass!

Sass Functions
4 questions
Requirements
  • We will cover all setup required.
  • You need NO previous knowledge with Sass or Bootstrap.
  • You should know basic HTML & CSS.
  • You need basic computer skills to install and run applications.
Description

Welcome To The Complete Sass & SCSS Course: From Beginner To Advanced!

⇉ Watch the promo video to see How You Can Begin Learning How To use Sass / SCSS to create more flexible designs in a shorter amount of time!

⇉ This Course is Complete! You receive over 4+ hours of video content & 30+ lectures!

⇉ Join Over 275,000+ Students Who Have Enrolled In My Udemy Courses This Year!

⇉ 7,500+ Five Star Reviews on our courses prove Students Who Enrolling Are Getting Real Results!

Then this course is for you! Click "Take This Course Now" For Instant Life-Time Access!

__________________________________________________________________________

Updated 2016: Added 1h of brand new content on Sass Frameworks as requested by students:

  1. the Susy toolkit to create custom grid systems,
  2. the Breakpoint framework to create responsive mobile-first designs more easily,
  3. the Compass framework which facilitates many typical design tasks.


Power up your website design skills with Sass & SCSS -- the powerful CSS preprocessor!

This course is the complete masterclass for Sass & SCSS development. It covers all you need to know about this awesome technology including:

  • How to use Sass / SCSS to create more flexible designs in less time and generate CSS code from them
  • How to use variables to store colors, sizes, fonts and more to avoid repetition and make your designs more flexible and reusable
  • How to perform calculations right inside your Sass & SCSS code to create responsive and flexible layouts
  • How to use mixins and imports to reuse your existing designs and finish new projects in no time
  • How to use inheritance in Sass to avoid duplicating code and the nasty bugs that come with it
  • How you can use Sass to write scaleable CSS code even for big projects


You will also learn how to use Sublime Text 3, one of the most popular lightweight text editors out there, confidently and write your code with lightning speed.

During the course, you will create useful code snippets in Sass that you can use in future projects to double your development speed -- and you will have all the tools you need to create more such snippets to enhance your productivity even further and make clients happy!

You can test what you learned in several quizzes and by coding along while we create a library of powerful code snippets.

__________________________________________________________________________

With the right mindset, understanding, and application of the teachings in this course, you will instantly begin to move towards Mastering Sass & SCSS!

When we learn something new, I add it to the course - at no additional cost to you! This is a course that will continue to add more and more to every aspect of your life.

In addition to the Udemy 30-day money back guarantee, you have my personal guarantee that you will love what you learn in this course. If you ever have any questions please feel free to message us directly and we will do our best to get back to you as soon as possible!

__________________________________________________________________________

What I can't do in this Course..

I can't guarantee your success – this course does take work on your part. But You Can Do It!

I am also not responsible for your actions. You are responsible for 100% of the decisions and actions you make while using this course.

__________________________________________________________________________

This course will not remain this price forever! It's time to take action!

Click the "take this course" button at the top right now!

...every hour you delay is costing you money...

See you in the course!

Sincerely,

Joe Parys & Peter Sommerhoff

Who this course is for:
  • You want to skyrocket your productivity when writing CSS code.
  • You want to keep up with current web design trends.
  • You want to write scaleable CSS code.
  • You want to avoid cluttering your code with repetitive selectors.
  • You want to make your designs much more flexible and easily create different variants of your beautiful designs.
  • You don't want to start from scratch in every project but have a flexible way to reuse existing designs to finish projects fast.
  • You want to build upon your Bootstrap knowledge and complement it with Sass to finish beautiful designs more effectively.