Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Sass Basics

Well done!

You have completed Sass Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Using Comments

3:40 with Guil Hernandez

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.

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