Introduction:
Sass is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a scripting language used in Sass files . Credit goes to Josh Pollock a wordpress developer and educator.
What is it a nutshell:
Sass is a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS. Think of it as…
CSS With SuperPowers
It is a CSS extension language
Let’s take an overview of some of the features below:
You can also just go to to https://sass-lang.com/guide .
How to use Sass
In the following section, we’ll outline some basic tips for using Sass, using examples from the official Sass website. Take a look at the Sass Documentation for additional references and examples.
Syntax
Sass includes two syntax options:
- SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax
- Indented (simply called ‘Sass’): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it’s quicker to write
Note that files can be converted from one syntax to the other using the sass-convert command.
Variables
Just like other programming languages, Sass allows the use of variables
For example:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}The following CSS will be produced:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Nesting
The idea is to nest your CSS selectors in such a way as to mimic your HTML hierarchy.
The following shows a basic navigation style that uses nesting:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}The CSS output is as follows:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}Partials
Partials are smaller Sass files that can be imported (see next section) into other Sass files. A partial is designated as such by naming it with a leading underscore: _partial.scss.
Import
Used with Partial the @import directive allows you to import your partial files into the current file, to build one single CSS file.
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}// basefile.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}And the corresponding CSS output:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}Note: When importing partials, you don’t need to include the file extension or the underscore.
Mixins
Mixins are a directive . They are containers for groups of CSS declarations. Mixins allow you to create repeating patterns of CSS declarations and avoid writing repeating code.
In a simple mixin, you write a CSS declaration, but in place of the class or ID, you use @mixin NAME_OF_MIXIN. For example:
@mixin rounded-borders {
-webkit-border-radius: 6px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 50px;
border-radius: 6px;
border-top-right-radius: 50px;
}
Wherever you need this pattern, you use @include rounded-borders
.call-to-action-box {
@include rounded-borders;
}
Mixins can also operate like functions, since they can accept one or more parameters that are used in the mixin. For example, if we wanted to add a border with a variable width and color, we could add variables for each value to this mixin
@mixin rounded-borders( $color, $width ) {
border: $width solid color;
-webkit-border-radius: 6px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 50px;
border-radius: 6px;
border-top-right-radius: 50px;
}
. . .and we would use it like this:
.call-to-action-box{
@include rounded-borders( $primary, 1px ) ;
}
Take a look at this example for border-radius:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }Notice the @mixin directive at the top. It has been given the name border-radius and uses the variable $radius as its parameter. This variable is used to set the radius value for each element.
Later, the @include directive is called, along with the mixin name (border-radius) and a parameter (10px). Thus .box { @include border-radius(10px); }.
The following CSS is produced:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}Mixins can even contain other mixins.
@mixin primary-tilt-right {
@include rounded-borders( $primary, 1px ) ;
}
@mixin accent-tilt-right {
@include rounded-borders( $accent, 1px ) ;
Functions
There are a great deal of built-in functions in SASS One of the most useful set is the color manipulation functions such as lighten and darken
$primaryTint = lighten( $primary, 30% ); $primaryShade = darken( $primary, 30%); $accentTint = lighten( $accent, 30%); $accentShade = darken( $accent, 30% );
File Imports
SASS has the ability to include one file in another, similar to PHP’s include() and require(). In SASS, you use @import PATH/TO/FILE to include another file.
Operators
SASS provides basic mathematical operators
$row-width = 1200px;
.row {
max-width: 1200px;
}
.row .half {
display:inline;
float:left;
width: $row-width/2;
}
.row quarter {
display:inline;
float:left;
width: $row-width/4;
}
Control Structures
SASS also provides basic control structures, like if, if/else, each, for, and while.
If statements are great for use inside of a mixin definition.
@mixin right-tilt-variable-borders( $width ) {
@if $width < 3 {
border-color: $primary;
}
@else {
border-color: $primaryTint;
}
border-width: $width;
@include right-tilt-rounded-borders;
}
For loops in SASS work just like for loops. Notice that the incremental variable, in this case $i, is used as #{$i}, which will output as the current count of the loop (1,2,3, or 4).
@for $i from 1 through 4 {
.gText-#{$i} { font-size: .618em * $i; }
}
To process a comma-separated list of strings in SASS, we define the variable to loop through, and then we write a CSS declaration using the variable. We use the same #{$variable} formatting as in the for loop.
@each $city in Pittsburgh, London, Paris, Tokyo {
.#{$city}-banner {
background-image: url('https://torquehhvm-wpengine.netdna-ssl.com/images/#{$city}.png');
}
}
In both our for and each loops examples, we were able to write one CSS declaration in place of four.
Nesting
Control structures are very useful, and along with mixins they make it possible to easily create libraries of design patterns in your stylesheets. The capability of SASS that saves the most repetitive coding in your front-end work will be nesting.
One of the most annoying parts of CSS is declaring the font color of an element, along with different colors for links, active links, visited links, and what to do in each of these cases on hover requires different declarations. SASS changes by allowing us to nest these declarations.
Instead of this in CSS:
.menu {
color: red;
}
.menu a {
color: red;
}
This is only a small part of what we would need, but writing all of that redundant code drives me nuts.
With SASS I can accomplish the same goal, like this:
menu{
color: #primary;
a {
color: $accent;
&:hover {color: $accentShade;}
}
a:visited {
color: $highlight;
&:hover {color: $highlightShade;}
}
}
Anthony Ku Ong 