Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this course, we'll walk you through the process of converting a simple website over to Sass, the most mature and most widely used CSS preprocessor.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Making the jump over to Sass can be an
intimidating experience.
0:04
At first, you'll hear about variables,
mixins, extends, or
0:08
other scary sounding things like functions
and interpolation.
0:12
Then there's the scariest of all the
scaries, the command line.
0:16
[SOUND] It's okay.
0:19
I once felt the same way.
0:22
But it doesn't have to be this way.
0:24
If you're still not sure where to begin
when converting CSS over to Sass,
0:26
this is the place to start.
0:30
I'm Guil, and in this course,
0:31
we'll walk you through how to convert a
simple website over to Sass,
0:33
the most mature and most widely used CSS
preprocessor out there.
0:37
And we're gonna work with a project that
we're already familiar with.
0:41
We'll take the Lake Tahoe website,
0:44
we built back in CSS basics, convert it to
a Sass project,
0:46
then refactor CSS using some of the most
valuable features of Sass.
0:49
But before we move on, let's do a quick
refresher on Sass.
0:55
So, by now, we may know that Sass is a CSS
preprocessor, that extends CSS.
0:58
And by preprocessor, I mean that it's a
layer that sits between the Sass
1:04
stylesheets we write, and the CSS file we
serve to the browser.
1:08
You see, browsers don't understand Sass
syntax.
1:12
So that syntax needs to be translated
1:15
into plain CSS before the browser can
actually read it.
1:18
And that's what the Sass compiler does.
1:21
It translates or compiles Sass to CSS.
1:23
So, now you may be thinking, why even
bother switching over to Sass?
1:28
What's wrong with plain old CSS?
1:32
My workflow's fine.
1:34
Why try to fix something that isn't
broken?
1:35
Well, on the surface, CSS may seem like an
easy language to understand and work with.
1:38
But the reality is, CSS can be difficult
to manage, and depending on the size of
1:42
the project, it can be fragile,
repetitive, and tedious to work with.
1:47
Now, this isn't a roast on CSS.
1:51
I still appreciate plain CSS and use it on
certain projects but
1:53
Sass empowers stylesheet authors to write
CSS the way it's meant to be written,
1:57
clear efficient, and easily maintainable.
2:02
Once we have our project up and
2:06
running with Sass, we'll see how Sass can
totally change the way we write CSS,
2:07
and make our jobs as designers and
developers a little easier.
2:11
The goal of this course is to help clear
up common misconceptions
2:16
you may have about Sass and help you fit
Sass into your front-end workflow.
2:19
Hopefully, it'll make you feel more
confident about writing Sass and
2:23
get you excited about using Sass in future
projects.
2:26
Let's get to work.
2:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up