How to Get More from CSS with Sass

Ariel Jakubowski
Level Up Coding
Published in
4 min readJan 23, 2021

--

Sass stands for Syntactically Awesome Stylesheet. It is a preprocessor scripting language that is compiled into CSS. Writing Sass is very similar to writing CSS in that it still makes use of the same types of selectors and relies on pairing CSS properties with values. The difference is that Sass expands on the functionality provided by CSS by allowing developers to use variables, nesting, imports, mixins, and inheritance. Sass expedites the development process and allows CSS to be written in more organized and efficient ways that make it easier for styling to be changed.

Variables

Variables are a simple and fundamental part of web development. As in any other programming language, in Sass a variable is a piece of information that has a name and a value. In Sass, variables are declared using the following format. It is important to note that as with CSS, every expression must end with a semicolon.

$variableName: value;

Variables can then be used by simply assigning them to CSS properties.

$pSize: 12pt;
p {
font-size: $pSize;
}

Nesting

Nesting allows code to be organized in layers so objects can contain smaller, more detailed and specific objects. For example, if you created a navigation bar consisting of a list, list elements, and links, instead of creating a separate CSS declaration for each type of element, a single declaration block could be created with the styling for each type of element nested inside.

//CSSnav {
font-size: 12pt;
}
nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > li {
display: inline-block;
}
nav > a {
display: block;
padding: 6px 12px;
}
//Sassnav {
font-size: 12pt;
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
}
}

Imports

Sass makes it easy to share styling information between different styling files. This allows styling code to be easily separated into different files. If you had a…

--

--