Preview
Video Player
00:00
00:00
What is Sass?
2:29Sass is a stylesheet language that extends the capabilities of CSS. It makes your job easier by adding advanced functionality and time-saving features to your CSS workflow. Browsers do not understand Sass syntax, so a stylesheet written in Sass needs to be translated (or compiled) into plain CSS before the browser can read it.
[MUSIC]
0:00
What do you get when you mix
rocket fuel with your CSS and
0:04
strap it to a skateboard and
push it down a hill?
0:07
As Hampton Catalan, the inventor of
Sass once described it, that's Sass.
0:10
I'm Gil, your front end web
development teacher here at Treehouse.
0:16
In this course,
0:19
you're going to learn a more powerful
way of authoring your CSS with Sass.
0:20
While CSS is a valuable style
sheet language on its own,
0:24
the more you grow as a designer and
developer, the projects you build and
0:27
the style sheets you write get larger,
more complex, and harder to maintain.
0:31
Sass is a language that extends
the capabilities of CSS.
0:35
It makes your job easier by
adding advanced functionality and
0:40
time saving features to your CSS workflow.
0:43
Sass is a CSS pre processor.
0:45
Meaning it's a layer between
the style sheets you write and
0:48
the CSS you serve the browser.
0:51
In web development, a preprocessor takes
source code written in one type of
0:53
language as input and outputs code that
can be understood by another program.
0:57
Browsers don't understand the Sass
language, but they do understand css.
1:01
So a style sheet written in
Sass needs to be translated or
1:05
compiled into plain CSS before
the browser can read it.
1:08
Why write stylesheets using
the language browsers don't understand?
1:12
Well, Sass helps you build your projects
faster in a more flexible way using
1:16
features that don't exist, or
not fully supported in CSS.
1:19
For example, with Sass you can create
a variable to store any type of value,
1:23
like a color, font size, or a number, and
1:27
reference it multiple
times in your stylesheet.
1:29
Need to change a value later?
1:32
Simply change it in the variable and the
entire style sheet reflects that change.
1:33
If you're repeating the same
declaration across CSS rules,
1:38
Sass let's you compose reusable blocks of
style you can share with other rule sets.
1:41
And instead of working with
one large monolithic CSS file,
1:46
you can split your files into partials or
1:49
separate style sheets, which makes your
styles modular and easier to find and
1:51
edit, without creating additional HTTP
requests that can slow down your site.
1:55
Sass can help you do so much more, and
the best part is that it's fun to write.
2:00
The web design and
2:04
development community has adopted Sass
as their go to CSS extension language.
2:05
That means that thousands of
companies use Sass in their projects.
2:10
So understanding Sass could
also make you more employable.
2:13
In this course,
2:16
you'll learn to use the powers of Sass
to boost your front end workload.
2:17
The examples we'll cover will teach you
why you should use SAS in your projects.
2:20
And by the end, you'll be writing more
efficient style sheets using code that's
2:24
easy to read and maintain.
2:27