Comments
CSS comments use the /* … */ syntax. CSS comments are part of a CSS file and will be sent over the internet to the client.
SCSS adds another syntax // …
SCSS syntax are not copied into the resulting CSS. They are therefore not send to the client. This allows you to keep the CSS files as small as possible while still having good documentation in the source files.
Variables
When using the same value, instead of placing independant values all over the stylesheet, consider using a variable for easier maintenance in the future.
Variables start with the $ symbol. A variable definition creates a new variable identifier and assigns a value to that identifier.
$primary-color: #1875e7;
h1#brand { color: $primary-color; }
sidebar { background-color: $primary-color; }
Variables can be used after declaring them. To use a variable, add the $ followed by the identifier in place of a concrete value.
Variables have scope which means the location a variable where is declared determines it’s visibility. A variable can be defined outside any rule, which makes it globally visible amongst all SCSS files. Defining a variable inside a SCSS rule limits it’s visibility to the rule and the nested rules within that rule.
Nesting
SASS allows you to nest selectors and properties.
Nesting for Selectors
CSS allows to chain elements in selectors to specify how to style nested elements that match that path defined in the selector. Basically a selector is a flattened representation of a tree structure. SCSS brings back the tree structure using nesting and saves some redundant typing.
To style elements on several levels of the same nesting hierarchy, you have to write the path over and over to extend it by another level until you have written all rules for all hierarchy levels you want to apply styles to.
SCSS allows you to nest rules to more naturally work with nested elements and their CSS. Instead of
header: { color: red; }
header a: {
font-weight: bold;
text-decoration: none;
}
you write
#header {
color:red;
a {
font-weight: bold;
text-decoration: none;
}
}
Nesting for Properties
Imagine styling a border with the exploded notation for demonstration purposes:
div {
border-width: 1px;
border-style: solid;
border-color: black;
}
The redundant part here is the border- prefix repeated for all properties.
With property nesting, you split at the dash and add a colon to the root property. Then write the part after the dash into the nested rule like so:
div {
border: {
width: 1px;
style: solid;
color: black;
}
}
The Parent Operator &
The & operator refers the direct parent in nested rules.
Imageine to following HTML:
<ul>
<li>list element 1</li>
<li class="selected">list element 2</li>
<li>list element 3</li>
</ul>
The list element having the selected class should be displaying in a darker color. With CSS you write several rules, with SCSS, nesting can be used which also allows for the use of the & operator.
ul { border: 1px solid green; }
ul li { color: #DCDCDC; }
ul li.selected { color: #808080; }
In SCSS, the same can be written using nesting.
ul {
border: 1px solid green;
li {
color: #DCDCDC;
&.selected {
color: #808080;
}
}
}
Here, the & refers to the li element because li is the immediate parent for the rule where & was applied. & will be replaced by li after the SCSS compiler produced the output.
The & operator prevents SASS from adding a space between the parent and the child when flattening out the CSS. Adding the & operator will concatenate the elements instead of joining them with a space in between. This is useful for class-based selectors and for pseudo classes.
The CSS Operators >, + and ~
Without using the child combinator (>), CSS rules are applied over more than one level of nesting. Using the > operator, the CSS rule is applied over exactly one level of nesting, which introduces the concept of an immediate child.
The sibling operator (~) selects any following element regardless of how many elements are in between.
The adjacent sibling operator (+) introduces the concept of an immediate sibling, which is the sibling directly following an element.
With SASS, the operators >, + and ~ can be applied at the end of a parent element or at the beginning of a child element.
Mixins
Mixins are defined using the @mixin keyword and they are applied using the @include keyword.
A mixin is a container that can be filled with SCSS rules. When the mixin is applied, all SCSS rules inside it are pasted to that location. In a sense, mixins are similar to variables in that they are a central point to store information and allow for the reuse of that information in several locations.
To define a mixin container use the following syntax:
@mixin <MIXIN_IDENTIFIER>(<PARAMETER>: <DEFAULT-VALUE>, ..., <PARAMETER>: <DEFAULT-VALUE>) {
<SCSS-RULES GO HERE>
}
Applying the mixin is done like this:
@include <MIXIN_IDENTIFIER>(<VALUE>, ..., <VALUE>);
When you have no need to parameterize a mixin, you can leave out the parameter list as it is optional.
TODO: add an example for a beneficial, real-world use of mixins