Sass/SCSS
A short introduction to Sass and SCSS
Basic idea
- "Syntactically Awesome Style Sheets"
- Sass is a style sheet preprocessor that transpiles files in the Sass/SCSS language into regular CSS that can be understood by browsers
- Two syntaxes available:
- SCSS (Sassy CSS): This is an extension of the CSS syntax, meaning that every valid CSS file is also a valid SCSS file with the same meaning
- Sass syntax (also known as indented syntax): Older syntax that uses indentation instead of brackets to indicate nesting and uses newlines instead of semicolons to separate different properties
Some features
(examples taken from the Sass website )
Variables
Example SCSS:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Resulting CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Nesting
Allows you to nest your CSS selectors in a way that's similar to how your HTML elements are nested
Example SCSS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Resulting CSS:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Mixins
Mixin = a group of CSS declarations that you can reuse together, potentially parameterized
Helps to keep your SCSS DRY
Typical use case: vendor prefixes
Example SCSS:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
Resulting CSS:
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Inheritance
Inheritance lets you share properties between selectors
Helps to keep both your SCSS and CSS DRY
Example SCSS:
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
Resulting CSS:
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
In the above example, %message-shared is a placeholder class which will not be included as such into the resulting CSS
Note: inheritance and mixins are very similar, but can have different effects. See SASS and Bootstrap - mixins vs. @extend . One important difference is that inheritance also avoids duplication in the resulting CSS (see above), which is not the case when using mixins. The way inheritance avoids duplication in the resulting CSS can sometimes have confusing consequences caused by the order in which rules are loaded (example below, see alo Inheritance, the cascade and specificity).
Same example but using mixins
SCSS for same example but with mixins:
@mixin message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@include message-shared;
}
.success {
@include message-shared;
border-color: green;
}
.error {
@include message-shared;
border-color: red;
}
.warning {
@include message-shared;
border-color: yellow;
}
Resulting CSS:
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: green;
}
.error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: red;
}
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: yellow;
}
Example where inheritance can be confusing
Example element: <div class='row highlight-row'></div>
Example SCSS (at first sight, this seems to make the element red):
.red-text {
color: red;
}
.row {
color: green;
}
.highlight-row {
@extend .red-text;
}
Resulting CSS (actually makes the element green):
.red-text, .highlight-row {
color: red;
}
.row {
color: green;
}