Preview
Video Player
00:00
00:00
Up and Running with Sass
2:59Now that we've installed or updated Sass, let's set up a local Sass project.
So, now that we've installed or updated
Sass, let's set up a local Sass project.
0:00
And like I said earlier, we're going to
use the Lake Tahoe website we built
0:05
in the CSS Basics course and convert it
over to Sass.
0:09
And you'll find the latest project files
in the download section of each page.
0:13
So, here's the project folder on our
desktop.
0:17
And when we open it up, we can see that it
consists of an HTML file,
0:20
a regular style sheet, some images, and a
few fonts.
0:25
Now, if you haven't seen what the project
looks like just yet, once I bring it up,
0:30
we can see exactly what it looks like.
0:34
It's a simple one-page website for the
city of Lake Tahoe.
0:36
[BLANK_AUDIO]
0:40
So, back in our project folder,
0:43
what we'll need first is a folder where we
can store our Sass files.
0:45
So, let's create a new folder and we're
going to name it scss.
0:50
Now, we could also name the folder Sass,
but
0:57
since we're going to be using the most
commonly used SCSS or
1:01
sassy CSS syntax, let's name it scss.
1:06
Next, if you think we'll need to throw
away our main style sheet and
1:10
start all over again with Sass, well, good
news.
1:14
We don't have to do that.
1:17
Let's actually move the style.css file
from
1:19
the css folder over to the new scss
folder.
1:24
So now we no longer need to worry about
the CSS files in the css folder,
1:28
Sass will take care of that for us.
1:33
So the first big step in converting a
project over to Sass is renaming the main
1:36
style sheet.
1:41
Now, we can name it style.sass, or
style.scss.
1:42
But again, since we're going to be using
the CSS-friendly SCSS syntax,
1:47
we'll rename our style sheet style.scss.
1:55
So next, I'm just gonna take a look at our
project in Sublime Text 2.
2:00
And great.
2:05
Now we have the beginnings of a Sass
project happening here.
2:06
And if we wanted to, we could keep writing
plain old CSS here in the style sheet, and
2:10
everything in the style sheet would be
valid Sass.
2:15
But as you'll soon see,
2:18
learning the nuances of the SCSS syntax is
definitely worth it.
2:20
And it doesn't take long to learn either.
2:24
It's a one time cost that will pay off in
the end because we'll be able to make all
2:26
this code here way more efficient,
maintainable,
2:30
and easier to read and manage.
2:33
So nothing's really happening in our
project just yet.
2:37
In fact, if you take a look at our website
again in the browser and
2:40
refresh, all our styles are gone.
2:43
Well, don't worry, we didn't break
anything.
2:46
Now we just need to tell Sass to watch our
project for changes, and
2:49
tell it how and where to compile our Sass
to CSS.
2:53
We'll learn how that works coming up next.
2:56