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
Now we're going to see how Sass makes writing CSS more efficient and fits nicely into our workflow. The first step in refactoring CSS over to Sass is breaking related sections of code out into partial files.
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
Another common misconception we may have
about Sass is that it adds more layers of
0:04
complexity into our workflow.
0:08
Well, now that most of the hard part is
done and
0:11
we've converted our project from CSS over
to a working Sass project.
0:13
We're gonna see how Sass really makes
things easier for us and
0:17
doesn't disrupt anything about our
workflow.
0:20
You see, a style sheet can turn into a
maintenance nightmare,
0:23
if we're not careful.
0:26
And currently, our project's style sheet
is one long list of rules.
0:27
And if we add more components to our
website,
0:31
it can become difficult to maintain over
time.
0:33
So now, we're going to restructure our
style sheet using Sass, and
0:36
this process is called refactoring.
0:40
Refactoring a project style sheet with
Sass is a gradual process, and
0:42
there are a few steps we need to take, so
let's go over these steps.
0:46
First, we'll break related sections out
into partial files.
0:50
Then, we'll find repeating patterns in our
code and
0:53
extract them into extends or placeholder
selectors.
0:56
After that, we'll look for areas where it
makes sense to nest Sass rules.
1:00
Then, we'll clean up our code even more by
creating variables for repetitive values.
1:04
And finally, we'll look for repeating
declaration groups, or rule sets, and
1:09
turn them into mixins.
1:13
As we'll see, it's not complexity we're
adding.
1:15
Just a little tidiness and efficiency.
1:17
So the first step in refactoring CSS over
to Sass
1:20
is breaking related sections of code out
into partial files.
1:23
Now as I mentioned in the previous stage,
CSS can be kind of messy to deal with.
1:27
So a big advantage of working with Sass is
how we're able to think about our project
1:32
modularly, then build and maintain it
using a modular approach.
1:36
Now, to learn more about building a
modular code base with Sass,
1:40
be sure to check out our modular CSS with
Sass course,
1:44
which expands on many of the concepts
we're about to cover.
1:48
So in our project, we're gonna break up,
1:51
our, main style sheet into small chunks,
using Sass partials.
1:54
So in the latest work space,
1:59
you'll notice that I've created three
folders inside our scss directory.
2:00
So here we have a directory named base,
2:05
below that, we have a directory named
components, and one called layout.
2:08
And inside these three directories are
some of the different partials
2:14
that will make up our styles.
2:17
If you haven't worked with Sass partials
yet, a partial is a Sass file,
2:20
in our case an SCSS file, that has an
underscore in front of the file name.
2:24
So with partials we can import a file into
another file,
2:30
instead of compiling it as a separate CSS
file.
2:34
And the underscore in the filename tells
the Sass compiler, hey, don't compile this
2:37
file to CSS, just leave it alone unless we
import it into our main Sass file.
2:42
Since we're going to be cutting code out
of our old style sheet,
2:48
let's go ahead and make it a partial by
changing the filename.
2:53
So I'm going to, right-click style.scss
and click Rename and
2:57
we're going to change the name to
_style.scss.
3:02
So this way, it won't compile to CSS.
3:07
Now, before we move on, let's tell Sass to
watch our project for
3:11
changes by going down to the workspace
console,
3:18
and writing the command sass --watch
scss:css.
3:23
So, we're gonna keep our style.scss file
as a partial moving forward only because,
3:28
like I said, we're going to be cutting
code out of this file and
3:34
breaking it up into bits.
3:38
Then, we're actually going to delete it
when we're finished.
3:40
So, what we need to do next is create a
global SCSS file that will
3:44
import all of our partials then compile it
to CSS.
3:49
So in the root of the scss folder, let's
create a new file.
3:54
So I'm going to select the scss folder,
right-click,
3:58
and, say New File, and we're going to name
it application.scss,
4:03
so this will be the file that will output
to CSS, and we'll get to this file later.
4:09
But now, we'll need to go over to our
index.html file, and
4:17
change the file name of the style sheet
being linked to
4:21
the document from style.css to
application.css.
4:26
[BLANK_AUDIO]
4:30
So I'll just go ahead and save it and
close it out.
4:32
Okay, so at this point, the only files
that should be outside of our partial
4:36
directories are application.scss and the
style.scss partial.
4:41
So now we can begin breaking out related
sections of code
4:49
into their respective partials.
4:53
Now think of each partial as a small piece
of the big puzzle.
4:55
And at first,
4:59
many of our SCSS files will only have
plain CSS styles in them, and that's okay.
5:00
So first, we'll break out the base styles,
and
5:06
these are all the rules that define what
elements look like by default.
5:08
So we're gonna add all the element
selectors in our CSS inside
5:12
this base.scss partial, located in the
base directory.
5:16
So back in our style.scss partial, I'm
actually going to select everything
5:21
beginning from this base style comment all
the way down, to the links.
5:26
So right above the main styles, and I'm
going to cut it out of our style sheet and
5:32
paste it inside the base.scss partial.
5:38
Now we can go ahead and save it.
5:43
All right, so let's close out our base
partial and
5:45
let's open up our layout directory.
5:48
And in our layout rules, we're going to
define layout styles for
5:50
the major sections of our page.
5:55
So for instance, the header, footer,
containers and columns.
5:57
And as we can see, I've already created
some partials for that.
6:01
So first, let's open up the header.scss
partial.
6:05
And we'll go over to style.scss and let's
scroll down.
6:08
And we're going to cut out the header rule
from the style sheet and
6:13
paste it inside our header partial, so
6:18
now we can go ahead and save this, and
close it out.
6:21
And then let's open up footer.scss and
same thing.
6:25
We'll go over to style.scss and let's
scroll down and
6:30
cut the main footer rule out of our style
sheet and
6:34
paste it inside the footer partial, so
I'll save it and we can close it out.
6:38
So next, let's open up the columns
partial, and
6:45
back in style.scss under Layout Styles,
6:49
let's cut out the column section right
here under the Floated Columns comment.
6:55
So I'm gonna cut out these three rules,
and paste them inside our columns partial.
7:01
So I'll save and close it out for now, and
finally,
7:08
let's open up the containers partial.
7:11
And this is what's gonna hold a lot of the
containers in our page.
7:14
So, back in style.scss, let's go ahead and
grab the wildlife container,
7:17
and the primary secondary content rule
here.
7:23
So I'm just gonna select them, cut them
out,
7:27
and paste them inside containers.scss.
7:30
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