Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS to Sass!
You have completed CSS to Sass!
Preview
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