Preview
Video Player
00:00
00:00
Bringing our Sass Project into Workspaces
3:19We already have Sass functionality all set up within Workspaces! In this video, we'll bring our Lake Tahoe project into Workspaces, then begin refactoring our CSS with Sass.
So, if you're just looking to get your
feet wet with Sass or if you wanna work on
0:00
a Sass project but don't wanna worry about
managing all the files on your computer,
0:04
luckily we already have Sass functionality
all set up within Workspaces.
0:08
So moving forward, we're going to be using
Workspaces for our project.
0:12
But you'll still have the option of
downloading all the project files and
0:17
working alongside using your favorite text
editor.
0:19
So I've created a new workspace, and
0:23
this is where we're going to refactor our
project.
0:25
And you can simply launch the workspace
associated with
0:28
this video to follow along.
0:30
So I'm going to take all the files inside
our lake-tahoe project folder.
0:32
So I'm gonna select all of them and
0:38
I'm going to drag them over to the left
sidebar in Workspaces.
0:40
And what this does is it uploads our
project files to the current workspace.
0:44
All right, so all our files are up.
0:49
And if we preview our project, we can see
that everything still looks good, and
0:51
it's working just like it was on our
desktop.
0:56
Great.
0:59
So, in the workspace console here, the
watch command
1:00
works exactly the same way it did earlier
in terminal or your command prompt.
1:04
So, to have Sass begin watching our
project and compiling to CSS,
1:09
down here in the workspace console, we'll
need to type the command sass
1:14
--watch scss:css.
1:19
Then hit Enter.
1:24
And as we're working on our project,
1:26
you'll also notice this sass-cache folder
that appears.
1:28
So what is this?
1:32
Well, this is just an extra folder Sass
creates on its own
1:34
to speed up the compiling of Sass to CSS
by caching parts of your Sass code.
1:37
So now that we know what it is,
1:42
we don't really need to mess with it
moving forward.
1:43
In fact, we can delete it and it's not
really a big deal.
1:45
So I'm just gonna leave it in our project.
1:48
Okay, so let's run a quick test to see if
everything's compiling correctly.
1:51
It's important to remember that at this
point, we shouldn't edit our output CSS.
1:55
So we'll go over to the scss directory and
2:01
bring up the style.scss file.
2:05
So let's just scroll down and change one
of the styles.
2:08
So for example, I'm going to add a red
background color to the body.
2:11
So let's say background: red, and let's
save and compile our Sass file.
2:16
And we'll refresh the browser.
2:24
And yep, [LAUGH] there's the red
background body color.
2:26
All right, so that means that everything's
good.
2:29
Now, before we move on, let's set our
background color back to normal.
2:32
So I'm just gonna undo that, save and
compile, refresh, and there we go.
2:36
So now we've officially converted our
project over to Sass, and if we wanted to,
2:44
we can leave our Sass project alone and
call it a day, right?
2:49
But let's not do that cuz then this course
would be over and
2:52
that would be kind of sad.
2:56
But what we really wanna do next is take
advantage of all of Sass' powerful
2:57
features.
3:02
Now that we have our Sass project all set
up inside Workspaces,
3:03
it's time to start refactoring our CSS
with Sass.
3:06
Up next is where we'll introduce the real
power of Sass into our workflow, and
3:10
we'll go over the steps we need to take to
convert our existing style sheet
3:14
over to Sass.
3:18