Sass - from beginner to real world

8h 2m 59s
English
Paid
May 15, 2024

Sass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, and it’s also a part of many modern workflows. This course is going to teach you how to use Sass, how to integrate it into your workflow and push you with challenges, helping you become a better front-end developer.

More

This course is about more than just Sass

This course also doesn’t solely focus on Sass as a language. Understanding the language itself is important, but it presents us with an opportunity to change how we work on our projects. This course teaches you not only the language of Sass but examines how to use it in the real world as well.
It also dives into intermediate and advanced level CSS. Sass is, at the end of the day, a fancy way to write CSS after all. So how could we learn Sass really well if we don’t also get into some higher level CSS stuff along the way? We’ll look at putting together a full, multi-page website, where I’ll examine file structure and general workflow concepts, as well as get into class naming conventions for our CSS, and more, along the way. This course isn’t just about learning how to use Sass, it’s about learning how to be a better front-end developer.

Watch Online Sass - from beginner to real world

Join premium to watch
Go to premium
# Title Duration
1 What is this course about? 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

Similar courses to Sass - from beginner to real world

The CSS Bootcamp: Zero to Mastery

The CSS Bootcamp: Zero to Masteryzerotomastery.io

Duration 40 hours 15 minutes 13 seconds
Composing Layouts in React

Composing Layouts in Reactfullstack.io

Duration 4 hours 38 minutes 12 seconds
Data Visualization + D3.js

Data Visualization + D3.jssuperhi.com

Duration 16 hours 48 minutes 54 seconds
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)
100 Days Of Code: The Complete Web Development Bootcamp 2024
Page Transitions

Page Transitionssuperhi.com

Duration 4 hours 10 minutes 33 seconds
10 Mega Responsive Websites with HTML, CSS, and JavaScript