DEV Community

Joseph Louie
Joseph Louie

Posted on

What SASS can offer

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;
}
Enter fullscreen mode Exit fullscreen mode

in SASS:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

In SASS:

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

In SASS:

// _filename.sass
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
Enter fullscreen mode Exit fullscreen mode
// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

In SASS:

// create a mixin
@mixin sample ($size) {
  font-size: $size;
}
// use mixin
p {
  @include sample(12px);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

In SASS:

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
hyftar profile image
Simon Landry

You can add syntax highlighting to your code snippets by adding scss or css after the 3rd backtick :)