SASS Essentials: Basics you need to know!

SASS gives CSS all the superpowers it needs and it gives you the ease to make the complex and large stylesheets efficient and scalable.

As you are reading this article, I am assuming, you are aware of the basics of HTML and CSS and now you are looking for something more efficient to work with. So hang in tight and let’s start with the awesome SASS.

What is SASS?

SASS stands for Syntactically Awesome Styling Sheets.
It is an extension for CSS that will make our work relatively easier and efficient by its key functionality of DRY (Do not Repeat Yourself) which implies that you could write your CSS code in lesser time with more efficiency and elegance.

Why SCSS?

SCSS emerged because CSS was missing what we needed, it required some extra functionality for the ever-growing development space, The scalability, and readability of code, SASS provides some really cool features like Variables, mixins, nesting, inheritance, loops (similar to many programming languages yet a bit different) that help us write robust, maintainable CSS code.

If all these terms seem foreign to you, no worries we are gonna define each of them and list down resources that could help you further.

SASS and SCSS

SASS and SCSS, both can be compiled into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which is built on top of the existing CSS syntax.

The major difference is in the syntax:

• SASS has a loose syntax with white space and no semicolons, while the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.

/* SCSS file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px;
/* SASS File*/
$primary-color: green
$primary-bg: red

Features of SASS/SCSS :

1. Variables

If you have ever learned any programming language, this term is not special to you, Variables are something to which you assign any value and you can use that variable anywhere instead of mentioning the value repeatedly. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

/* Variable declaration /* 
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Output CSS

alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

We do have variables in CSS but the difference in CSS variables and SCSS variables are, Scss variables are all compiled away by Scss. CSS variables are included in the CSS output.

2. Mixins

Mixins in simple terms are a group of properties that are grouped together and assigned a name that can be used later to imply all the grouped properties by including that name, Similar to functions in any programming language.

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}

Tip: Never forget to @include the mixin after defining it when needed.

3. Nesting

This helps us nest two or more selectors as per the hierarchy of elements, which is not possible in CSS, in turn avoiding repetition of code.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

This makes writing CSS much cleaner and less repeated.

4. Extend/Inheritance

This has to be hands down one of the most significant features of SCSS which is gonna make your life much easier as a developer.

Similar to the concept of Inheritance in Object-Oriented Programming, Inheritance is the procedure by which you can inherit the properties of a selector to another, as well as include more properties in the selector that inherited the properties.

Inheritance in SCSS can be implemented using the @extend keyword.

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Refer to this link to know more about it.

5. Loops and Conditionals

Directives like @if, @for, @else, etc provide us with the feature of conditional styling without banging our heads by adding several classes in our CSS code.

The conditionals here have the same functionality as in any other programming language, yet again the difference is in syntax.

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

You can refer to this link to know more about the flow controls in SCSS.

6. Partials

Partials are SCSS/SASS files with _ in front of the filename (eg: _config. scss).

Partials are files that are not compiled to CSS when rendered. These are files containing snippets of CSS code that can be imported by any other SCSS files when required.

This helps in the modularization of CSS files, which makes the code more maintainable and easy to use.

For example, You have a multipage website, sharing a similar theme through similar variables so you can have a common file say _config. scss and you can import it to your _menu. scss or _about. scss, which will be imported to you main.scss and that will be compiled to the CSS file.

SCSS is not just limited to these features but has so much more to offer -

• Helper Functions: lighten or darken to adjust colors
• Maps: containing dictionaries of values (key/value pairs)
• Functions: Blocks of code that can take a parameter and return a SASS property value.

@function set-text-color($color) {
@if (lightness($color) <40) {
@return #ffff;
} @else {
@return $text-color;}
}

To know more about the topic you head over these resources sections. Don’t hesitate to switch between the resources to have a simpler and more comprehensive understanding-

Resources

• SASS documentation page
• W3Schools
• Video Content: Traversy media SASS crash course

How to get started?

Install Nodejs and a text editor(eg: VS Code) before installing SASS.

Create a main.scss file in your project folder.

Refer to the documentation for a more detailed installation process.

Installing SASS using npm.

npm install -g sass

After installation use, establish the scss and CSS connect.

sass — watch main.scss:main.css

Now you are all set with the superpowers you needed for writing a robust CSS code, Start implementing what you learned, and create a cool project in no time.

Now that you reached the end of this article, I hope you enjoyed reading it!

Hit the Follow button and 👏 to let me know if you liked it or not.

Lets Connect! LinkedIn or Twitter :)