1
00:00:00,390 --> 00:00:04,260
To help a team track their styles in an
organized way, developers often work with

2
00:00:04,260 --> 00:00:08,300
multiple Sass files consisting of a number
of different style sheets and directories.

3
00:00:08,300 --> 00:00:11,640
For example, its comment to divide your
style into separate files based on

4
00:00:11,640 --> 00:00:12,800
their function.

5
00:00:12,800 --> 00:00:17,310
The sites main style in one file,
layout related styles in another file and

6
00:00:17,310 --> 00:00:19,500
typography styles and yet another.

7
00:00:19,500 --> 00:00:23,180
Normally you wouldn't want dozens of style
sheets for a site since each file means

8
00:00:23,180 --> 00:00:27,240
another server request which can slow down
your website, however, Sass let's you

9
00:00:27,240 --> 00:00:32,110
compile dozens of individual Sass
files into a single compact CSS file.

10
00:00:32,110 --> 00:00:34,520
Since you're working with two
different types of files,

11
00:00:34,520 --> 00:00:37,700
it's best to organize them
in two separate directories.

12
00:00:37,700 --> 00:00:40,520
A directory containing your
working SCSS files and

13
00:00:40,520 --> 00:00:43,200
another that holds your final CSS output.

14
00:00:43,200 --> 00:00:46,350
You'll usually instruct Sass to
autocompile a directory of Sass files

15
00:00:46,350 --> 00:00:48,730
into one output.css file.

16
00:00:48,730 --> 00:00:52,310
In the workspace, let's create
a new folder for our Sass files.

17
00:00:52,310 --> 00:00:55,120
Developers commonly name this folder SCSS.

18
00:00:56,390 --> 00:01:01,518
Now let's place input.scss
inside this new folder and

19
00:01:01,518 --> 00:01:04,361
rename the file style.scss.

20
00:01:14,301 --> 00:01:16,750
Now, let's create a folder for
the output css.

21
00:01:16,750 --> 00:01:18,340
We'll name it css.

22
00:01:19,510 --> 00:01:24,460
You no longer need the output.css and
output css.map files, so

23
00:01:24,460 --> 00:01:26,270
you can delete them from your project.

24
00:01:26,270 --> 00:01:30,130
sass will auto generate a new CSS file and
map for us inside our CSS folder.

25
00:01:37,890 --> 00:01:44,452
Now over in the console run
the command sass --watch

26
00:01:44,452 --> 00:01:51,430
followed by scss:css and
with this command,

27
00:01:51,430 --> 00:01:57,030
we are instructing sass to watch the scss
directory for any changes to the working

28
00:01:57,030 --> 00:02:02,600
scss files, then output those changes into
a style feed inside the css directory.

29
00:02:04,340 --> 00:02:09,000
Once you run the command and
refresh the workspace sidebar,

30
00:02:09,000 --> 00:02:14,165
you'll see that even though we didn't
create or specify an output css file,

31
00:02:14,165 --> 00:02:18,915
Sass generated the output
file style.css as well as

32
00:02:18,915 --> 00:02:21,930
style.css.map inside the css folder.

33
00:02:24,110 --> 00:02:26,990
Now, we're going to work
with just one file.

34
00:02:26,990 --> 00:02:31,940
inside the SCSS folder for now but
in a later video you'll learn how

35
00:02:31,940 --> 00:02:37,120
Sass can combine multiple SCSS
files into one output SCSS file.

36
00:02:37,120 --> 00:02:40,490
And since we renamed our files and
placed them inside folders

37
00:02:40,490 --> 00:02:45,930
we need to update the output CSS path and
file name and index dot HTML.

38
00:02:45,930 --> 00:02:51,718
So I'll change the third links tag,
href value

39
00:02:51,718 --> 00:02:58,250
to css/style.css.

40
00:02:58,250 --> 00:02:58,950
And now we're all set.

41
00:03:00,230 --> 00:03:02,740
Once Sass begins watching your files for

42
00:03:02,740 --> 00:03:05,330
changes, you're pretty much
done using the console.

43
00:03:05,330 --> 00:03:07,820
Just make sure not to close it
because that will stop the watcher and

44
00:03:07,820 --> 00:03:10,120
the compelling of Sass to css.

45
00:03:10,120 --> 00:03:13,030
And if you prefer not to use
the command line there are a few

46
00:03:13,030 --> 00:03:17,000
good desktop applications that will get
you up and running with SAS in no time.

47
00:03:17,000 --> 00:03:20,400
I've posted links to many of these
tools and apps in the teacher's notes.