CourseFlix

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

Course content

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

Related courses

  • Responsive Design for Beginners thumbnail

    Responsive Design for Beginners

    By: Jess Chan
    You have already learned the basics of HTML and CSS... so what's next? Yes, you can follow the steps from the tutorial and have become a master at finding answe
    30 hours 51 seconds
  • Advanced CSS & JavaScript Projects thumbnail

    Advanced CSS & JavaScript Projects

    By: Zero To Mastery
    Master CSS and JavaScript by creating real projects! Enhance your skills by developing practical applications such as a quiz, an expense tracker.
    15 hours 24 minutes 29 seconds 5 / 5
  • 10 Mega Responsive Websites with HTML, CSS, and JavaScript thumbnail

    10 Mega Responsive Websites with HTML, CSS, and JavaScript

    By: Udemy
    Learn to create 10 mega responsive websites with HTML, CSS, and JavaScript. Elevate your web development skills with modern design projects for your portfolio.
    21 hours 54 minutes 19 seconds 5 / 5

Frequently asked questions

What is Sass - from beginner to real world about?
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…
Who teaches Sass - from beginner to real world?
Sass - from beginner to real world is taught by Kevin Powell. You can find more courses by this instructor on the corresponding source page.
How long is Sass - from beginner to real world?
Sass - from beginner to real world contains 134 lessons with a total runtime of 8 hours 2 minutes. All lessons are available to watch online at your own pace.
Is Sass - from beginner to real world free to watch?
Sass - from beginner to real world is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Sass - from beginner to real world online?
Sass - from beginner to real world is available to watch online on CourseFlix at https://courseflix.net/course/sass-from-beginner-to-real-world. The page hosts every lesson with the integrated video player; no download is required.