- Course Overview 1:52
- The Project Config File 9:14
- Pixels to Em Function 6:35
- Sass Function Challenge 1 objective
- Colors with Sass Maps 6:35
- Nested Sass Maps 7:20
- Review: Mixins and Functions 5 questions
- Background Image Mixin 7:30
- Pseudo-Element Mixin with @error 5:45
- Sass Directives Challenge 1 objective
Preview
Video Player
00:00
00:00
Course Overview
1:52In this course, we're going to learn how to write modular CSS with Sass. We'll cover topics such as mixins and functions for writing modular code, the BEM (Block element modifier) approach for naming our classes, and using the BEM principles with the Scalable and Modular Architecture for CSS style guide (also called SMACSS). Towards the end, we'll also get into writing modular media queries and building a grid system with Sass.
Today's websites and
0:05
applications are larger than ever, and a
lot hinges on the CSS architecture.
0:06
So CSS that is poorly thought out can be a
strain on maintenance and
0:10
development in the long run.
0:14
Besides being efficient and performant,
CSS needs to be reusable, scalable, and
0:17
adaptable to different use cases.
0:22
We shouldn't need to re-write our
solutions or
0:24
worry about them conflicting with other
CSS rules in our project.
0:26
I'm Guil and in this course we're gonna
learn how to write modular CSS with Sass.
0:31
We'll cover topics such as mix ins and
0:35
functions for writing modular code, the
bam or block element modifier approach.
0:38
For naming our classes and using the BEM
principles with the scalable and
0:43
modular architecture for CSS Styleguide,
also called SMACSS.
0:47
We'll also get into modular media queries
and building a grid system with Sass.
0:51
Using a modular approach with Sass can
boost our development workflow and
0:56
cut down maintenance by reducing the
amount of code we write.
1:01
And, breaking up our code into modular
bits will also improve how
1:04
our code scales.
1:08
Since we're able to reuse it on other
parts of our project.
1:09
We'll focus on getting familiar with the
patterns of BEM and
1:12
SMACSS by refactoring the CSS for a simple
UI toolkit called Poly.
1:14
Currently the CSS for it is poorly thought
out, messy, and hard to maintain.
1:20
So our job will be to refactor the CSS
with Sass,
1:24
using many of the best practices and
principles of modular CSS architecture.
1:28
We're gonna learn how to write code that
scales and
1:34
that's easier to use, understand, and
maintain.
1:36
And throughout the course,
1:38
make sure you also take a look at the
teacher's notes for each video.
1:40
Because they'll provide additional
information and
1:43
resources about each topic.
1:45
Coming up next, we'll get started by
writing our project's configuration file.
1:48