1
00:00:00,460 --> 00:00:04,040
So, if you're just looking to get your
feet wet with Sass or if you wanna work on

2
00:00:04,040 --> 00:00:08,280
a Sass project but don't wanna worry about
managing all the files on your computer,

3
00:00:08,280 --> 00:00:12,750
luckily we already have Sass functionality
all set up within Workspaces.

4
00:00:12,750 --> 00:00:17,110
So moving forward, we're going to be using
Workspaces for our project.

5
00:00:17,110 --> 00:00:19,990
But you'll still have the option of
downloading all the project files and

6
00:00:19,990 --> 00:00:23,060
working alongside using your favorite text
editor.

7
00:00:23,060 --> 00:00:25,310
So I've created a new workspace, and

8
00:00:25,310 --> 00:00:28,200
this is where we're going to refactor our
project.

9
00:00:28,200 --> 00:00:30,950
And you can simply launch the workspace
associated with

10
00:00:30,950 --> 00:00:32,960
this video to follow along.

11
00:00:32,960 --> 00:00:38,270
So I'm going to take all the files inside
our lake-tahoe project folder.

12
00:00:38,270 --> 00:00:40,290
So I'm gonna select all of them and

13
00:00:40,290 --> 00:00:44,780
I'm going to drag them over to the left
sidebar in Workspaces.

14
00:00:44,780 --> 00:00:49,110
And what this does is it uploads our
project files to the current workspace.

15
00:00:49,110 --> 00:00:51,850
All right, so all our files are up.

16
00:00:51,850 --> 00:00:56,570
And if we preview our project, we can see
that everything still looks good, and

17
00:00:56,570 --> 00:00:59,230
it's working just like it was on our
desktop.

18
00:00:59,230 --> 00:01:00,560
Great.

19
00:01:00,560 --> 00:01:04,870
So, in the workspace console here, the
watch command

20
00:01:04,870 --> 00:01:09,890
works exactly the same way it did earlier
in terminal or your command prompt.

21
00:01:09,890 --> 00:01:14,720
So, to have Sass begin watching our
project and compiling to CSS,

22
00:01:14,720 --> 00:01:19,612
down here in the workspace console, we'll
need to type the command sass

23
00:01:19,612 --> 00:01:24,420
--watch scss:css.

24
00:01:24,420 --> 00:01:26,000
Then hit Enter.

25
00:01:26,000 --> 00:01:28,240
And as we're working on our project,

26
00:01:28,240 --> 00:01:32,660
you'll also notice this sass-cache folder
that appears.

27
00:01:32,660 --> 00:01:34,100
So what is this?

28
00:01:34,100 --> 00:01:37,680
Well, this is just an extra folder Sass
creates on its own

29
00:01:37,680 --> 00:01:42,010
to speed up the compiling of Sass to CSS
by caching parts of your Sass code.

30
00:01:42,010 --> 00:01:43,290
So now that we know what it is,

31
00:01:43,290 --> 00:01:45,720
we don't really need to mess with it
moving forward.

32
00:01:45,720 --> 00:01:48,550
In fact, we can delete it and it's not
really a big deal.

33
00:01:48,550 --> 00:01:51,030
So I'm just gonna leave it in our project.

34
00:01:51,030 --> 00:01:55,970
Okay, so let's run a quick test to see if
everything's compiling correctly.

35
00:01:55,970 --> 00:02:01,270
It's important to remember that at this
point, we shouldn't edit our output CSS.

36
00:02:01,270 --> 00:02:05,620
So we'll go over to the scss directory and

37
00:02:05,620 --> 00:02:08,990
bring up the style.scss file.

38
00:02:08,990 --> 00:02:11,950
So let's just scroll down and change one
of the styles.

39
00:02:11,950 --> 00:02:16,390
So for example, I'm going to add a red
background color to the body.

40
00:02:16,390 --> 00:02:24,100
So let's say background: red, and let's
save and compile our Sass file.

41
00:02:24,100 --> 00:02:26,500
And we'll refresh the browser.

42
00:02:26,500 --> 00:02:29,750
And yep, [LAUGH] there's the red
background body color.

43
00:02:29,750 --> 00:02:32,630
All right, so that means that everything's
good.

44
00:02:32,630 --> 00:02:36,530
Now, before we move on, let's set our
background color back to normal.

45
00:02:36,530 --> 00:02:44,290
So I'm just gonna undo that, save and
compile, refresh, and there we go.

46
00:02:44,290 --> 00:02:49,278
So now we've officially converted our
project over to Sass, and if we wanted to,

47
00:02:49,278 --> 00:02:52,988
we can leave our Sass project alone and
call it a day, right?

48
00:02:52,988 --> 00:02:56,294
But let's not do that cuz then this course
would be over and

49
00:02:56,294 --> 00:02:57,788
that would be kind of sad.

50
00:02:57,788 --> 00:03:02,758
But what we really wanna do next is take
advantage of all of Sass' powerful

51
00:03:02,758 --> 00:03:03,580
features.

52
00:03:03,580 --> 00:03:06,650
Now that we have our Sass project all set
up inside Workspaces,

53
00:03:06,650 --> 00:03:10,340
it's time to start refactoring our CSS
with Sass.

54
00:03:10,340 --> 00:03:14,570
Up next is where we'll introduce the real
power of Sass into our workflow, and

55
00:03:14,570 --> 00:03:18,110
we'll go over the steps we need to take to
convert our existing style sheet

56
00:03:18,110 --> 00:03:18,810
over to Sass.