What is SASS?
SASS stands for Sass stands for Syntactically Awesome Stylesheet. SASS is a CSS pre-processor and extension of a CSS. SASS helps stay DRY by eliminating repetition.
Different Features that SASS offer
-Variables
-Nesting
-Partials
-Modules
-Mixins
-Extend/Inheritance
-Operators
Variables
SASS allows us to declare values in one place and reuse that variable in multiple places. It helps cut down on you repeating code.
in CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
in SASS:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Nesting
Nesting helps you keep track of what selectors belong to what feature.
In CSS:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
In SASS:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
In SASS you can see that ul and li are part of nav easily. In CSS it takes a little bit more work, but if you were to have 20+ selectors you will think nesting is amazing.
Partials
Partials and Modules help you stay organized. You can create a partials file by starting it with a _filename.sass
Modules
to use/import the partials we use the @use rule.
In CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
In SASS:
// _filename.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
// styles.sass
@use 'base'
.inverse
background-color: base.$primary-color
color: white
Utilizing Partials and Modules help you clean up your code. Instead of having all your css in one file, you can separate it. You can even reuse some of the partials in different projects.
Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. This is similar to a function in a programming language.
In CSS:
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
In SASS:
// create a mixin
@mixin sample ($size) {
font-size: $size;
}
// use mixin
p {
@include sample(12px);
}
In the code above we create the mixin. Whenever we a mixin that has a property ($size) we need to pass in an argument in this case 12px.
Extend/Inheritance
This is feature is probably the most useful feature in SASS.
In 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 SASS:
/* This CSS will print because %message-shared is extended. */
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
// This CSS won't print because %equal-heights is never extended.
%equal-heights
display: flex
flex-wrap: wrap
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
In the SASS code above we define a selector that has declarations. We can reuse the declarations over and over again as long as we use @extend.
Operators
SASS allows us to use math operators like +,-,*,/, and %.
In CSS:
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
In SASS:
.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complementary"]
float: right
width: 300px / 960px * 100%
In CSS we have to have done the math beforehand, but in SASS we can execute the math operation in the SASS file. I prefer it this way because it's closer to what we do in a programming language like javascript.
Conclusion
The most important thing you should take away from this article is that SASS helpful developers modulize their code. Having reusable code is important especially if you have many many selectors.
Thank You for reading. If you have any concerns or feedback, please comment below.
resources
-https://www.w3schools.com/sass/default.asp
-https://sass-lang.com/guide
-https://www.sitepoint.com/sass-basics-the-mixin-directive/
Top comments (1)
You can add syntax highlighting to your code snippets by adding
scss
orcss
after the 3rd backtick :)