What SASS can offer

#beginners #css

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/