Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
Developers use comments in their code to make parts of it easier to understand. There are two different ways you can write comments in Sass: single-line and multiline comments.
Comment snippet
// =========================================
// Mixins
// =========================================
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Developers use comments in their code to
make parts of it easier to understand.
0:00
And there are two different ways you can
write comments in Sass, single line and
0:04
multi line comments.
0:08
Remember plain CSS is also valid SCSS, so
0:09
you're able to write standard multi line
CSS comments in your Sass style sheets.
0:13
We already have several of these comments
in our SCSS file to divide the different
0:17
sections of our style sheet.
0:20
Like base styles, header and footer,
containers, components and so on.
0:22
And as you can see,
0:26
these type of comments are preserved
in the CSS output by default.
0:27
Sass also lets you define
single line comments
0:32
that do not appear in the CSS output.
0:35
It would create them by typing
a double forward slash and
0:38
everything written after
the slashes becomes a comment.
0:41
It's similar to the way we
write comments in JavaScript.
0:44
For example, this single line
comments above the variables and
0:47
mix ins begin with a double forward slash.
0:50
And notice how they do not
appear in the CSS output.
0:53
You can use single line
comments to document or
0:57
leave notes about what a particular
line or section of code does.
0:59
For example,
1:02
add a useful inline comment to let
developers know the color of a hex value.
1:03
Or they can help other developers using
your style sheet quickly understand what
1:11
a block of code does.
1:16
So for example, this nested rule
targets a paragraph inside intro.
1:17
The comments you write are for
your Sass files only.
1:25
So notice how the comment does
not appear in the CSS output.
1:28
Now, if you need to break
a comment into multiple lines,
1:32
you'll need to place a double
forward slash in front of each line.
1:35
Otherwise, Sass will throw
an invalid CSS error.
1:38
Single line comments also
make it easier to test and
1:42
debug styles by letting you comment and
uncomment individual lines of code.
1:45
And comments are also useful for
1:52
dividing the important
sections in your style sheet.
1:53
For instance, I like to create
a large comment header for
1:56
each major section of the style sheet.
2:00
Then, below use single line comments
to describe what a block of code does.
2:03
In a later video, you'll use these type
of single line comments to explain
2:15
the structure and rule of a file.
2:19
You can use comments in all
kinds of different ways.
2:20
How you comment your Sass is up to you and
your team.
2:23
In this stage I introduced you to
the true power and elegance of Sass.
2:26
You learned that selector nesting
provides a handy shortcut for
2:30
writing descendent selectors and
composing complex selectors.
2:33
Together with the friendly
ampersand symbol,
2:36
nesting helps you organize your
selectors with less repetitions.
2:38
Mixins store reusable groups of
CSS declarations that you can use
2:42
over and over again.
2:46
You include a mixins properties in other
rules sets using the @include directive.
2:47
You can also extend the properties of
a regular selector via the @extend
2:51
directive.
2:55
Extends and mixins are similar,
2:56
the difference is that extend groups all
selectors that share the same properties
2:58
into one rule instead of
duplicating them in the output.
3:02
And it's usually best practice
to extend placeholder selectors.
3:05
Because they never appear in
the output CSS unless extended.
3:09
The features you learn have
a potential for misuse.
3:13
So remember to use them responsibly.
3:15
Avoid writing code that makes your Sass
files difficult to read and maintain.
3:17
At this point you know enough about
Sass to begin using it in your
3:22
projects, so well done.
3:24
Now it's time to add powerful
logic to your style sheets.
3:26
Coming up in the next stages you will
push your Sass skills even further.
3:29
By learning to work with color functions,
conditionals, loops and
3:32
custom functions to add reusable
logic to your style sheets.
3:36
See you then.
3:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up