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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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