Preview
Video Player
00:00
00:00
Installing and Using Sass
2:09You can find implementations of Sass written in programming languages like Java, Python, PHP, JavaScript, and others. The original Sass was written in the Ruby programming language, so installing via a Ruby gem is one of the most common ways to get Sass up and running on your machine.
Sass runs on Windows,
Mac, and Linux machines.
0:00
Eventually you'll want to install Sass on
your own computer, but for this course,
0:03
you don't have to.
0:06
We've already installed Sass in the
workspaces associated with this course.
0:07
So to follow along,
launch the workspace with this video.
0:11
However, if you do wanna follow along with
your own text editor, you should download
0:14
the project files from this page and
install Sass on your computer.
0:17
I've provided notes on how to
install Sass on Windows and
0:21
Mac in the teacher's
notes with this video.
0:23
But before we start, it's important
you know that the Sass preprocessor
0:26
allows two different syntaxes.
0:30
There's the Sass syntax,
also known as the indented syntax, and
0:32
it's the original syntax of Sass,
and SCSS, known as Sassy SCC.
0:36
This is the latest generation of Sass.
0:40
To see the differences
between the two syntaxes,
0:43
have a look at the files
in your workspace.
0:45
Notice how one file uses the .sass
extension and the other, .scss.
0:47
Open input.sass,and you'll see why
it's called the indented syntax.
0:54
Notice how it's like CSS without any
of the curly braces and semicolons.
0:59
Instead, it uses strict indentation to
specify each declaration in a rule.
1:03
Open input.scss and
you should see a more familiar syntax.
1:09
It's the usual CSS syntax you know and
love.
1:13
CSS is fully compatible
with the syntax of SCSS.
1:15
That's why it's the most
popular of the two syntaxes and
1:20
the one we'll use in this course.
1:22
Because you don't have to
change the way you write CSS.
1:24
By just writing plain CSS
syntax inside a .scss file,
1:26
you're writing totally valid SCSS.
1:31
In fact, you could change a style
sheet extension from .css to .scss and
1:33
it will just work.
1:38
Off you'll go using Sass.
1:40
However, keep in mind that the indented
1:41
Sass syntax is not
compatible with CSS syntax.
1:44
So if you try to write regular
CSS inside a .sass file,
1:48
the code will produce errors.
1:52
Even though we're using a CSS-friendly
syntax here in input.scss,
1:54
the browser still doesn't understand
this file written in SCSS.
1:58
So we need to translate or
compile this code into a regular CSS file.
2:02
I'll teach you how to do
that in the next video.
2:06