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 Sass Basics!
You have completed Sass Basics!
Preview
You'll often work with multiple Sass files consisting of several different stylesheets and directories. Sass lets you compile dozens of individual Sass files into a single, compact CSS file.
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
To help a team track their styles in an
organized way, developers often work with
0:00
multiple Sass files consisting of a number
of different style sheets and directories.
0:04
For example, its comment to divide your
style into separate files based on
0:08
their function.
0:11
The sites main style in one file,
layout related styles in another file and
0:12
typography styles and yet another.
0:17
Normally you wouldn't want dozens of style
sheets for a site since each file means
0:19
another server request which can slow down
your website, however, Sass let's you
0:23
compile dozens of individual Sass
files into a single compact CSS file.
0:27
Since you're working with two
different types of files,
0:32
it's best to organize them
in two separate directories.
0:34
A directory containing your
working SCSS files and
0:37
another that holds your final CSS output.
0:40
You'll usually instruct Sass to
autocompile a directory of Sass files
0:43
into one output.css file.
0:46
In the workspace, let's create
a new folder for our Sass files.
0:48
Developers commonly name this folder SCSS.
0:52
Now let's place input.scss
inside this new folder and
0:56
rename the file style.scss.
1:01
Now, let's create a folder for
the output css.
1:14
We'll name it css.
1:16
You no longer need the output.css and
output css.map files, so
1:19
you can delete them from your project.
1:24
sass will auto generate a new CSS file and
map for us inside our CSS folder.
1:26
Now over in the console run
the command sass --watch
1:37
followed by scss:css and
with this command,
1:44
we are instructing sass to watch the scss
directory for any changes to the working
1:51
scss files, then output those changes into
a style feed inside the css directory.
1:57
Once you run the command and
refresh the workspace sidebar,
2:04
you'll see that even though we didn't
create or specify an output css file,
2:09
Sass generated the output
file style.css as well as
2:14
style.css.map inside the css folder.
2:18
Now, we're going to work
with just one file.
2:24
inside the SCSS folder for now but
in a later video you'll learn how
2:26
Sass can combine multiple SCSS
files into one output SCSS file.
2:31
And since we renamed our files and
placed them inside folders
2:37
we need to update the output CSS path and
file name and index dot HTML.
2:40
So I'll change the third links tag,
href value
2:45
to css/style.css.
2:51
And now we're all set.
2:58
Once Sass begins watching your files for
3:00
changes, you're pretty much
done using the console.
3:02
Just make sure not to close it
because that will stop the watcher and
3:05
the compelling of Sass to css.
3:07
And if you prefer not to use
the command line there are a few
3:10
good desktop applications that will get
you up and running with SAS in no time.
3:13
I've posted links to many of these
tools and apps in the teacher's notes.
3:17
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