Sass
Sass stands for syntactically awesome style sheets and is a stylesheet language that is compiled into CSS. It is also what’s known as a style preprocessor. The code written in Sass is compiled and outputs CSS.
The official website for Sass is: https://sass-lang.com/.
Some of the popular features of Sass include:
Variables
Variables allow you to store information for reuse throughout the stylesheet. In
Sass, variables start with the $
sign and use the format of <variablename>: <expression>
.
They allow the CSS style to be changed easily in one place rather than having to find every instance of that particular item.
Common variable usage includes setting background colors, text colors, fonts, etc.
$offwhite: #EEE8D6;
$darkblue: #022933;
$red: #d14348;
$color-main: $darkblue;
$color-background: $offwhite;
$color-headlines: $red;
$font-main: 'Merriweather Sans', Helvetica, sans-serif;
$font-highlight: 'Bree Serif', Helvetica, sans-serif;
Nesting
Nesting allows you to write style rules inside another that will automatically combine the outer rule’s selector with the inner rule selector. It sets CSS selectors in a hierarchy matching HTML
Sass:
/* scss file */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Compiled CSS:
/* css file */
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
Mixins allow you to define styles that can be re-used throughout the stylesheet. They can be set up with parameters (with defaults) and variables to make them flexible.
Sass:
@mixin replace-text($image, $x: 50%, $y: 50%) {
text-indent: -99999em;
overflow: hidden;
text-align: left;
background: {
image: $image;
repeat: no-repeat;
position: $x $y;
}
}
Compiled CSS:
.mail-icon {
@include replace-text(url("/images/mail.svg"), 0);
} .mail-icon {
text-indent: -99999em;
overflow: hidden;
text-align: left;
background-image: url("/images/mail.svg");
background-repeat: no-repeat;
background-position: 0 50%;
}
Extending Classes
When you add the @extend
rule to a style class, it writes the CSS code so that the
current class inherits the styles of another.
Typically, you will see HTML code with multiple style classes so that you can apply the base style and then any modifiers to that base style. By using the @extend rule, we can rewrite our HTML code to only use the modifier necessary without the additional base class(es). See the example below.
Original HTML file:
<!-- html code -->
<button class='btn btn-default'>Default</button>
<button class='btn btn-cool'>Cool</button>
<button class='btn btn-hot'>Hot</button>
If we add the @extend
rule in the modifiers in the Sass file as on the left, it will
produce a CSS file as on the right. Notice how all of the modifiers are included on
the top line.
SCSS file:
/* scss code */
.btn {
display: inline-block;
padding: 6px 12px;
text-align: center;
cursor: pointer;
color: #fff;
}
.btn-default {
@extend .btn;
background: $color-btn-default;
}
.btn-hot {
@extend .btn;
background: $color-btn-hot;
}
.btn-cool {
@extend .btn;
background: $color-btn-cool;
}
CSS file after processing:
/* css code - All classes have the base settings */
.btn, .btn-default, .btn-hot, .btn-cool {
display: inline-block;
padding: 6px 12px;
text-align: center;
cursor: pointer;
color: #EEE8D6; }
.btn-default {
background: #022933; }
.btn-hot {
background: #d14348; }
.btn-cool {
background: #0076a3; }
And that allows us to remove the base class and only use the modifiers. So our HTML code can now look like this, with only one class name needed:
<!-- revised html code -->
<button class='btn-default'>Default</button>
<button class='btn-cool'>Cool</button>
<button class='btn-hot'>Hot</button>
Operators
We can use math in Sass to automatically format things for us. Sass can add, subtract, multiply and divide using standard math operators like +
, -
, *
, /
, and %
.
For an example, consider a grid of images that need to be arranged. Below are the code snippets demonstrating how to automatically do this using Sass operators.
HTML code for list of images:
<div class="grid">
<div class="item"><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
<div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
</div>
Sass code:
// Image Grid mixin
@mixin imagegrid($qty, $margin) {
width: ((100% - (($qty - 1) * $margin))/$qty);
&:nth-child(n) {
margin-right: $margin;
margin-bottom: $margin;
}
&:nth-child(#{$qty}n) {
margin-right: 0;
margin-bottom: 0;
}
}
.grid {
@include clearfix;
.item {
float: left;
@include imagegrid(5, 1%);
}
img {
display: block;
border-radius: 10px;
max-width: 100%;
}
}
CSS code:
.grid:before, .grid:after {
content: '';
display: table; }
.grid:after {
clear: both; }
.grid .item {
float: left;
width: 19.2%; }
.grid .item:nth-child(n) {
margin-right: 1%;
margin-bottom: 1%; }
.grid .item:nth-child(5n) {
margin-right: 0;
margin-bottom: 0; }
.grid img {
display: block;
border-radius: 10px;
max-width: 100%; }
Page in Web Browser:
This gives us a lot of flexibility with changing the layout for items on the web page.
Comments
Comments in Sass can be marked with beginning slash asterisk and a closing
asterisk slash (/* Comment */
) or with two slashes (// Comment
). However, it is
important to note that there are some differences in how these comments behave.
-
Comments marked with the two slashes
// Comment
will never show up in your processed CSS file. -
Comments marked with the slash asterisk
/* Comment */
will show up in your processed CSS file if your compiler has the setting ofstyle: "expanded"
. -
If you want to hide the comments in your compiled CSS file, you can use
style: “compressed"
. -
If you are using the compressed setting for compiling your CSS and you want a specific comment to show up, you can mark it with an exclamation point like this:
/*! Comment */
.
These are useful for things like copyright statements that need to be shown.
Lists
Lists contain a sequence of other values. In Sass, the list can be separated by commas or by spaces as long as it’s consistent within the list. You can have lists with only one value and you can have an empty list. One thing to note about lists in Sass is that they are not zero indexed, meaning that the first item in the list is at position 1 (rather than position 0 as it is in Python).
To access the elements in the list, use the function nth($listname, $n)
where the
$listname
is the variable representing the list and $n
is the position of the
element in the list.
LOOPING THROUGH LISTS
One of the most common uses for a Sass list is to configure the processor to do something for each element in the list as shown in the examples below.
Using @each
// style.scss file
@each $sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}
/* style.css file */
.icon-40px {
font-size: 40px;
height: 40px;
width: 40px;
}
.icon-50px {
font-size: 50px;
height: 50px;
width: 50px;
}
.icon-80px {
font-size: 80px;
height: 80px;
width: 80px;
}
Using @for
// style.scss file
$color-headlines: $blue, $purple, $green, $red, $orange, $yellow;
h1, h2, h3, h4, h5, h6 {
font-family: $font-highlight;
}
@for $item from 1 through length($color-headlines) {
h#{$item} {
color: nth($color-headlines, $item);
}
}
/* style.css file */
h1, h2, h3, h4, h5, h6 {
font-family: "Bree Serif", Helvetica, sans-serif; }
h1 {color: #0076a3; }
h2 {color: #6d73c2; }
h3 {color: #548c27; }
h4 {color: #d14348; }
h5 {color: #f39856; }
h6 {color: #ffba00; }
Maps
Maps in Sass are arrays that hold key, value pairs just like a dictionary in Python. There are many functions in Sass to create the maps and access the values within them.
SCSS file:
/* scss file */
// Map the colors to the button name
$color-btn: (
default: $color-main,
hot: $red,
cool: $blue
);
// Extend the base value of the class using color mapping
@each $key, $value in $color-btn {
.btn-#{$key} {
background-color: $value;
}
}
CSS file
/* css file */
.btn-default {
background-color: #022933; }
.btn-hot {
background-color: #d14348; }
.btn-cool {
background-color: #0076a3; }
Import
Sass lets you break down your code into modular pieces or partials using the
@import
command. This means you can have a separate file relevant to each style object. Note: Files that are partials are designated with an underscore _
at the
beginning of the file name.
For example, you could structure your Sass directory like this:
sass/
base/
_variables.scss
_mixins.scss
modules/
_navbar.scss
_footer.scss
...
style.scss
And your style.scss
file might look like this:
/* Project specific CSS styles */
// Base settings
@import "base/_variables";
@import "base/_mixins";
// Modules
@import "modules/_navbar";
@import "modules/_footer";
The resulting style.css
file would contain all of the modules listed in the
style.scss
file in the order that they were imported. This means that you should
make sure that the modules are imported in the appropriate order.
Resources
Documentation for Sass can be found at https://sass-lang.com/documentation.
Another good resource is http://thesassway.com/.