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.7 (270 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.
9,180 students enrolled
$19
$195
90% off
Take This Course
  • Lectures 41
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course 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 100,000+ Students Who Have Enrolled In My Udemy Courses This Year!

⇉ 2500+ Five Star Reviews Shows Students Who Enrolling Are Getting Real Results!

__________________________________________________________________________

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

What are the 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.

What am I going to get from this course?

  • 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.

What is the target audience?

  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction - Welcome To The Complete SASS & SCSS Course!
01:58

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!

01:14

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

Article

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

Section 2: Sass Overview
04:08

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.

2 questions

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

04:45

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.

2 questions

Sass or SCSS? Show that you know the difference!

Section 3: Setup
08:09

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)

04:18

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!

04:38

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.

05:58

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.

Section 4: Variables
04:02

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];

08:38

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).

2 questions

Show your invariable knowledge of variables in Sass!

Section 5: Partials
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.

4 questions

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

Section 6: Mixins
08:18

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.

3 questions

Can you mixin some knowledge to solve this quiz?

11:32

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.

4 questions

Can you deal with arguments (in Sass)?

04:38

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.

2 questions

Can you handle @content in @mixins?

Section 7: Imports
06:54

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.

2 questions

Test your knowledge on Sass imports!

05:03

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!

Section 8: Media Queries
05:19

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.

2 questions

Can you handle nested @media queries?

05:20

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.

Section 9: Operators
04:42

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"?)

03:14

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.

3 questions

Test your arithmetic, Pythagosass!

Section 10: Functions
03:07

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.

06:04

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.

09:43

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.

4 questions

Test your knowledge on functions in Sass!

Section 11: Inheritance
06:31

Inheritance in Sass allows you to extend existing styles (e.g. for class selectors) with additional styles. Imagine you want to create classes .highlight, .error and .critical-error. Each of those can extend the previous one to add additional highlighting.

Selectors can be extended using the @extend directive in Sass.

04:59

You can create extend-only selectors to avoid CSS code being generated from some base style you want to use only to @extend from. This is done by defining a style like %base-style with a percentage-sign instead of a dot or hash and then using @extend %base-style.

Also, you can @extend from multiple selectors to inherit all styles from multiple base selectors. Finally, you can also chain @extend directives to extend a selectors that also extends another selector itself.

This video also covers two rules when using Sass' @extend directive.

05:12

There is a discussion going on between web designers on whether you actually need inheritance in Sass or not. You could also use mixins for the same purposes instead of @extend.

You can decide for yourself if you prefer to use the @extend directive or not.

Generally the rule of thumb is:

  • @mixin creates less selectors in the CSS code but more actual styles
  • @extend creates more selectors but less actual duplicated styles

The pure CSS file size will usually be larger when using mixins. However, you can check out the linked resource in the lecture materials to see why this is not the case when using gzip on your server.

5 questions

Can you inherit some new knowledge in this quiz?

Section 12: Conditional Directives
06:51

Use conditional statements in Sass to handle different cases and make your designs even more flexible.

This is also called conditional control flow and is a well-known concept for any programmer. It allows you to switch your CSS output depending on conditions you can define. You can use them with the @if, @else if, and @else directives to define different styles to applied under different conditions.

This concept can be used, for instance, to easily switch between different themes for your website as you'll see in the following lecture.

07:15

Learn how to structure your code to be able to easily switch between different themes for your site -- simply by reassigning a single variable.

This use case demonstrates how the @if directive can make your code base even more flexible. Hence, this is another step towards more productivity in web design to be able to finish projects for your clients faster.

04:51

This lecture demonstrates another application of the @if directive in combination with mixins. The mixin checks a $brand variable to include styles that are passed-in only if you're targeting that specific brand (with @content).

This mixin is useful to keep your main code clean of unwieldy @if and @else conditions. Instead, you can use the brand name to insert specific styles on a fine-grained level for a specific client. This is really powerful in combination with the themes approach from the previous lecture.

3 questions

Do you have unconditional knowledge of conditions and the @if directive?

Section 13: Loops
04:44

Loops are another advanced concept in Sass that is well-known for any programmer. Loops allow you to repeatedly execute a certain part of your code. In Sass, this means you can repeatedly output certain styles (each time with some slight changes of course).

For instance, @for loops are useful to generate CSS code like col-1, col-2, col-3, ... with widths of 2em, 4em, 6em, and so on. When using loops, you only have to define the actual structure once in your code and then let the loop fill in the correct information (like "width: $i * 2em;").

06:45

Other than @for loops, @each loops can be used to iterate over a list or map. This is the kind of loop you will use most frequently (if you are going to use loops at all), and they're generally more powerful than @for loops in Sass.

Lists store multiple values in a single variable and can be created easily: $list: val1, val2, val3;

Maps are key-value pairs which are often useful in more advanced use cases. They can also be created easily in Sass: $map: (key1: value1, key2: value2, key3: value3).


05:26

@while loops allow you to use arbitrary loop conditions and arbitrary steps. For instance, if you want to output the classes .col-2, .col-4, .col-6, you may prefer using a @while loop instead of a @for loop -- because with a while loop, you can use steps of 2.

Be aware that, when using while loops, you have to update the loop variable manually (usually at the end of each iteration).

3 questions

Get in the loop by answering this quiz!

Section 14: Sass Frameworks
05:05

This lecture gives a quick overview of the three Sass frameworks you requested in the discussions: Susy, Breakpoint and Compass.

Susy is a toolkit which lets you create your very own and flexible grid system. This has several advantages over grid systems such as the one that comes with Bootstrap.

Breakpoint is a neat little framework which helps you write your media queries more easily and concisely. Also, it favors mobile-first design which is a great practice for you to adopt.

Compass is a framework that provides lots of helpers that will make your day easier, including mixins for typography & vertical rhythm, working with colors or vendor-prefixing CSS3 properties.

07:11

In this lecture, you learn how to install and set up new Sass frameworks such as Susy, Breakpoint and Compass. This requires Ruby to be installed, just like the Sass installation at the beginning of the course.


To get a Sass framework up and running, the general steps are:

  1. In Terminal/Command Line: gem install <some-framework>
  2. In config.rb: require '<my-framework>';
  3. In the SCSS file: @import "<my-framework>"
  4. Having fun with the new Sass framework :)


Remember to install the "Compass" package in Sublime Text and to enable the Compass build system.

15:41

To get started with Susy, you first define the $susy variable to configure your grid system. This variable contains a map with several elements. The most important keys in the map are "columns", "gutters", "debug", and "global-box-sizing".

Next, define an outer container div which will lay out all its child elements according to your grid system. Add the container mixin to that element using @include container(); and if you want, pass in a max-width.

Elements inside this container can now be laid out using, for example, @include span(3 of 12) to make the element span three columns in a 12 column layout. In addition to the span mixin, there is also a span function and a gutter function which return the width of a number of columns or the gutter, respectively.

For the last element in a row, add "last" to the parameter as in @include span(4 of 12 last) to make it float to the right and avoid it from jumping into the next line. You can also use @include last.

05:53

Using border-box-sizing changes the way that the width of each element is calculated. With border-box-sizing, the width contains the content-box + padding + border.

The default however is content-box-sizing which often causes trouble when adding padding because the width of your elements increases and breaks the grid layout.

I recommend you use border-box-sizing instead -- which is also the intuitive way you perceive the size of an element -- to prevent such problems. You can do that with Susy by setting global-box-sizing: border-box in the $susy variable and then adding @include border-box-sizing at the top of your Sass file.

09:15

Breakpoint helps you write media queries more easily and encourages responsive, mobile-first designs -- which is a great practice for you to follow.

To use Breakpoint, make sure to require 'breakpoint' in the config.rb file and then @import "breakpoint" in the Sass file where it's used.

Once that is done, you can use the breakpoint mixin by adding @include breakpoint(920px) for example. When just passing a px amount, Breakpoint assumes this is the min-width for the media query because it assumes a mobile-first design.

10:33

The Compass framework is a great enhancement for Sass. It comes with a variety of helpers that will make your day a lot easier.

To enable Compass for your project, again first require 'compass' in the config.rb file and then @import "compass" in the Sass file (or import just a subset of what Compass provides, such as "compass/css3").

Some of the mixins and functions Compass contains are:

  • CSS3 properties: @mixin text-shadow, @mixin box-shadow, @mixin border-radius
  • Helpers: @mixin column-count, @function darken, @function adjust-lightness, @function image-url()
  • Any many more: http://compass-style.org/reference/compass/
Section 15: Course Summary & Course Conclusion - It's Now Time To Apply What You've Learned
01:53

Students will learn about a short course summary about all that they have learned in this course!

05:17

Bonus lecture for our students

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Joe Parys, Bestselling Instructor, 60 Courses, Serving 175,000 Students

Why are 175,000+ students enrolled in my Udemy courses?

1) I teach with passion and purpose! Every course is delivered with my students in mind.

2) My courses will help you achieve real results and change your life today!

3) My dedication to Udemy and teaching online. Udemy has named me one of its top instructors.

► Try enrolling in a course with me and see for yourself! ◄

__________________________________________________________________________

Want to learn how to become A Professional Web Developer?

Would you like to Transform Your Confidence and Self-Esteem?

Or maybe how to earn thousands Teaching Online Video Courses Full Time?

Then Enroll in my Udemy Courses Today! You too can be doing this - and so much more!

__________________________________________________________________________

About Joe Parys: 

Joe is a certified life coach, professional motivational speaker, entrepreneur, licensed psychology teacher and head basketball coach for USA Basketballs Pilot Program. His main areas of expertise are teaching, coaching, public speaking, personal development, personal transformation, the human mind, maximizing human potential, motivation and goal setting.

My CV:

Joe has his bachelor’s degree from Coe College in Cedar Rapids, IA. He was a four-year varsity letter winning college athlete in the sport of men's basketball. He is also a coach for USA basketball.

He is a Licensed Psychology, History and Government teacher for grades 5-12. He has been teaching High School for the past three years.

Joe is also a licensed and certified professional life coach and motivational speaker from the Fowler Institute.

Business:

Joe Parys is an entrepreneur running his own online academy, Joe Parys Academy. Joe has spoken and taught his courses in numerous high schools in the United States and continues to travel around the country inspiring students of all ages.

Mission Statement- Joe Parys Academy is committed to superior life coaching. Our products and services are created and marketed with the purpose of helping others worldwide prosper and improve their lives.

Vision Statement- Our vision at Joe Parys Academy is to help each client find their purpose in life, reach their goals and fulfill their lifelong dreams.

Instructor Biography

Peter Sommerhoff, Developer, Software Engineering Geek, and Premium Instructor

Hi, it's Peter, glad you made it here! If you're anything like me, you want to always keep learning, master new skills, and ultimately achieve your life goals -- whether that's a well-paying career, traveling the world, working from the comfort of your home, or sharing your expertise with and helping other people.

Does that sound like you? Then make sure to enroll in one my courses and learn about awesome programming languages, software design, productivity, or anything else you're interested in!

I feel honored for every student I have and will make sure you have a great learning experience. You can always ask me personally if you get stuck or have anything at all I can help you with.

So please check out my courses below and I'll see you there!

Instructor Biography

Joe Parys Academy, Best-Selling Instructor & Founder of the Joe Parys Academy

Why are 150,000+ students enrolled in our Udemy courses?

1) Purpose: We teach with passion and purpose! Every course is delivered with our students in mind.

2) Quality: Our courses are life changing and help you achieve real results!

3) Commitment: My dedication to Udemy and teaching online. Udemy has named me one of its top instructors!

► Try enrolling in any of our courses today and experiecne us firsthand! ◄

 __________________________________________________________________________

Joe Parys Academy is a Leader in Online Education with more than 30+ Co-Authored Courses

The Founder of Joe Parys Academy, Joe Parys, is a Bestselling Udemy instructor with more than 150,000+ students from more than 200 countries around the world! 

Mission Statement:

Our Mission at Joe Parys Academy is to create the highest quality online courses available anywhere in the world. We are focused on producing competent professionals and supplying them with the knowledge and skills they need. 

Vision Statement: 

Our Vision at Joe Parys Academy is for our students to have the opportunity to learn about the subjects of their choosing, taught by our highly qualified teachers. 

 __________________________________________________________________________

Want to learn how to become A Professional Web Developer?

Do You Desire To Create Your Own Mobile Applications? 

Or Maybe Learn How To Run Your Own Microsoft Access Business? 

Then Enroll in our Co-Authored Udemy Courses Today! 

You Too Can Be Doing All of This and So Much More!  __________________________________________________________________________

About The Founder of Joe Parys Academy:

Joe Parys is a Bestselling Udemy instructor, certified life coach, professional motivational speaker, entrepreneur, licensed psychology teacher and head basketball coach! His main areas of expertise are teaching, coaching, public speaking, personal development, personal transformation, the human mind, maximizing human potential, motivation and goal setting.

Joe Parys' CV:

Joe has his bachelors degree from Coe College in Cedar Rapids, IA. He was a four year varsity letter winning college athlete in the sport of men's basketball. He is also a coach for USA basketballs pilot program.

He has been teaching Psychology, History and American Government for grades 5-12 the past three years. 

Joe is also a licensed and certified professional life coach and motivational speaker from the Fowler Institute of Life Coaching. 

Business:

Joe Parys is an entrepreneur running his own life coaching and motivational speaking business. Joe has spoken and taught his courses in numerous high schools in the United States and continues to travel around the country inspiring students of all ages.

Ready to start learning?
Take This Course