CF

Sass - from beginner to real world

8h 2m 59s
English
Paid

Sass has become an essential language for front-end developers. It enables you to write code more efficiently, achieve complex styles effortlessly, and seamlessly integrates into modern workflows. This course is designed to teach you how to use Sass effectively, integrate it into your projects, and tackle real-world challenges, ultimately enhancing your skills as a front-end developer.

Beyond Just the Basics of Sass

This course extends beyond mere Sass syntax. While understanding the language itself is crucial, it also presents an opportunity to revolutionize your project workflow. In addition to covering the fundamentals of Sass, this course explores its practical application in real-world scenarios. We delve into intermediate and advanced CSS topics, as Sass ultimately boils down to an advanced way of writing CSS.

Building a Multi-Page Website

To solidify your understanding, we'll guide you through creating a comprehensive multi-page website. This hands-on approach will cover best practices in file structure, class naming conventions, and general workflow concepts. Our goal is not only to teach you Sass but also to equip you with the skills to become a more proficient front-end developer.

Key Learning Outcomes

  • Master the use of Sass in modern development environments.
  • Understand and implement efficient file structures.
  • Learn advanced CSS techniques alongside Sass.
  • Apply class naming conventions to enhance code clarity and maintenance.

This course is tailored for those who aspire not just to learn Sass but to elevate their complete front-end development skill set.

About the Author: Kevin Powell

Kevin Powell thumbnail

Kevin Powell is a Canadian developer and one of the most cited independent voices on modern CSS — running the Kevin Powell YouTube channel, which has anchored a generation of front-end developers' relationship with CSS. He is widely respected for the patience and depth of his explanations of the parts of CSS that the language's reputation as a quirky historical accident often obscures.

The course catalog covers modern CSS in depth: Grid and Flexbox layout, custom properties (CSS variables), modern responsive design (container queries, the dynamic viewport units, modern color spaces), CSS animations and transitions, typography on the web, and the design-system thinking that connects CSS to broader UI work. Material is structured for working developers building real interfaces.

The CourseFlix listing under this source carries 7 Kevin Powell courses spanning that range. Material is paid; Kevin Powell's courses are sold individually on the original platform. Courses are aimed at developers ready to make CSS a deliberate craft rather than an afterthought.

Watch Online 134 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 134 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What is this course about?
All Course Lessons (134)
#Lesson TitleDurationAccess
1
What is this course about? Demo
05:26
2
What is Sass anyway?
00:33
3
What software do you need?
01:31
4
Installing ruby (Windows users only)
02:25
5
Installing Sass
03:42
6
Watching folders to compile Sass to CSS
03:36
7
Output style options
02:31
8
What are source maps?
01:55
9
Command line alternatives (free and premium options)
02:23
10
Sass vs SCSS - two different ways of writting Sass
01:41
11
CSS vs Sass comments
03:00
12
Nesting selectors
02:47
13
SCSS vs Sass nesting
07:23
14
Nesting and the ampersand (&)
02:13
15
Nesting properties
03:49
16
Time for a challenge!
03:17
17
What are variables?
02:26
18
Variable inseption (variables inside variables)
02:26
19
Variables and the cascade
04:04
20
Naming variables
02:18
21
It's challenge time!
00:58
22
Introduction to Operators
06:01
23
Operators - a use case
10:27
24
Pricing Table - Intro
30:50
25
Writing the markup
03:19
26
Setting up the variables
01:27
27
Styling it up
01:14
28
An introduction to Extends
01:46
29
Placeholders
03:38
30
Don't forget about the other stuff you can do
03:07
31
Problems with extends - 1
03:54
32
Problems with extends - 2
02:35
33
Introduction to Mixins
02:37
34
Selectors inside mixins
03:33
35
Mixin arguments part one
02:20
36
Mixin arguments part two: optional arguments
05:20
37
Mixin arguments part three: more ways to work faster
01:52
38
Mixin arguments part four: keeping things in the right order
06:45
39
Mixin Challenge - Introduction
05:05
40
Introduction to Functions
02:45
41
Some of my favourite Sass functions
04:04
42
The Markup
08:12
43
Getting Sass set up and running
06:32
44
Settin' up the variables
05:52
45
Creating the mixins
07:13
46
Styling the typography
00:56
47
Styling the buttons
01:18
48
Finishing touches
00:54
49
Introduction to Lists
00:58
50
List lengths
02:37
51
The different types of lists
02:06
52
Accessing specific list items
00:36
53
The different ways to write lists
03:06
54
What is interpolation?
03:40
55
Interpolation and math
01:37
56
A quick refresher on Mixins
01:47
57
A look at variable arguments
04:46
58
Staying organized with variables
01:51
59
Variable arguments with @include
02:37
60
Variable arguments with @include - part two
04:52
61
Mixin challenge - part one.mp4
03:47
62
Mixin challenge - part two.mp4
01:52
63
A look at @content
01:47
64
Using @content to make awesome media query mixins
00:38
65
Adding a custom size media query
01:02
66
Intro to Sass @for
01:09
67
Using the $i variable
01:51
68
Using interpolation
01:57
69
Adding in some math
01:24
70
A little more math and a new variable
00:49
71
@for challenge
03:27
72
Introduction to @each
03:27
73
A more useful example of @each
03:49
74
Using nested lists
02:22
75
Intro to the @if directive
00:55
76
A more realistic example
02:36
77
@else directive intro
03:30
78
A more realistic look at @else
02:55
79
Using @if and @else to make a cool @mixin
03:30
80
Improving the mixin
01:47
81
Introduction to @if else
02:50
82
The if() function
03:13
83
Using the if function to write less code
02:26
84
Introduction to custom functions
06:12
85
Variable number of arguments
01:29
86
Dynamically set text color
01:05
87
Making the output look a little better
03:14
88
Refactor challenge.mp4
00:24
89
Refactor challenge - solution.mp4
04:00
90
Intro to debugging in Sass
01:54
91
The warning
01:17
92
Creating an error
03:49
93
Improving our error with interpolation
03:52
94
Introduction to Sass maps
02:09
95
How to access maps
04:10
96
Access maps made easier
02:18
97
Mapception
01:45
98
Accessing maps inside of other maps
04:26
99
Accessing maps inside of other maps made easier (plus a mini challenge)
04:51
100
Improving our media query mixin with a map
01:30
101
Maps and `@each`
06:29
102
Accessing maps with `@each` challenge
04:47
103
Accessing maps with `@each` solution
02:08
104
map-has-key()
02:55
105
A more realistic example of map-has-key()
00:35
106
Improving our media query mixin - challenge
01:51
107
The solution
01:31
108
A look at the type-of() function
02:09
109
Using type-of to improve our mq mixin even more! A challenge
03:56
110
And making it even better!
04:17
111
Introduction to partials
03:23
112
The 7-1 system and what I actually use (file organization)
09:05
113
Introduction to the project
01:52
114
A look at the files
02:56
115
The Markup - Navigation
04:16
116
The Markup - Home and About
05:16
117
The Markup - Facts and Meals
04:12
118
The Markup - Testimonial and Footer
04:02
119
First variables and mixins
06:39
120
Setting up a custom function
02:33
121
Adding an error to the function
01:47
122
Setting up the typography
08:19
123
Setting up the general layout
03:32
124
Styling the navigation
04:32
125
Styling up the home section layout
03:09
126
Stlying the About section, and some trouble shooting
04:49
127
Creating an underline pseudo element mixin
05:43
128
Styling the facts and meals sections
07:41
129
Styling the testimonial and footer, and fixing a mistake
10:40
130
Adding in a media query mixin
08:44
131
About section - large screen layout with grid
08:55
132
Creating a grid mixin
07:38
133
Fixing up the nav and about section
02:29
134
Fixing up the typography + closing thoughts
04:08
Unlock unlimited learning

Get instant access to all 133 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this Sass course?
This course is designed for front-end developers looking to enhance their skills, so a basic understanding of HTML and CSS is recommended. Familiarity with command line tools is helpful, especially for lessons involving installing Ruby and Sass, and compiling Sass to CSS. The course begins with an overview of necessary software, ensuring you have the right setup to follow along.
What projects will I build during the course?
The course includes building a comprehensive multi-page website. This hands-on project helps you apply Sass in real-world scenarios, focusing on best practices for file structure, class naming conventions, and workflow concepts. By the end of the course, you will have a solid project to showcase your understanding of Sass and advanced CSS techniques.
Who is the target audience for this course?
This course is tailored for front-end developers who want to integrate Sass into their development process and improve their efficiency. It is suitable for those who already have a foundational understanding of CSS and HTML and are looking to tackle more complex styling challenges in their projects.
How does this course compare in depth and scope to other Sass courses?
This course goes beyond basic Sass syntax by incorporating advanced CSS techniques and real-world applications of Sass. It covers 134 lessons, including intermediate to advanced topics like mixins, functions, and efficient file structures. Unlike some beginner courses, it emphasizes practical implementation and workflow improvement for front-end developers.
What specific tools or platforms are covered in this course?
The course covers the installation of Ruby for Windows users and the setup of Sass. It also discusses command line alternatives for compiling Sass to CSS, including both free and premium options. Source maps are introduced to help debug Sass code in browsers, and the course compares Sass and SCSS syntaxes.
What topics are not covered in this Sass course?
While the course covers a wide range of Sass and CSS topics, it does not delve into JavaScript or server-side programming. The focus remains on front-end development, specifically on enhancing styling capabilities and workflow efficiency using Sass and advanced CSS techniques.
How much time should I expect to dedicate to this course?
With 134 lessons, the course is extensive and designed to be comprehensive. While the exact runtime is not specified, students should be prepared to invest significant time in both watching the lessons and completing the hands-on exercises, such as building a multi-page website, to fully grasp the material.