DEV Community

Cover image for SASS - CSS with SuperPowers
Sanskrati Jain
Sanskrati Jain

Posted on • Updated on

SASS - CSS with SuperPowers

Introduction

Sass (Syntactically awesome style sheets) is the CSS extension language that allows you to use things like variables, nested rules, inline imports and more. It helps to keep things organized and allow you to write CSS faster.

Setup

  • Install SASS

  • You can now write a SASS file, but you need to convert it to CSS file since the browser cannot read SASS.

  • To convert there are many ways:

  1. Use command sass --watch input.scss output.css. Here input.scss is the sass file and output.css is the css file. --watch (watch flag) tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass.

  2. We can also use sass --watch app/sass:public/stylesheets command. Here input directory and output directory is seperated by :. Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.

  3. If you are using VS Code as a code editor. You can use Live Sass Compiler
    Alt Text
    Now when you create a file with .scss, you will see a Watch SASS at the lower left. Click on it and your Sass will be converted into css and will get save in the same folder.

Syntax

There are two syntax that SASS allows:

SCSS(Sassy CSS)

  1. Similar to CSS(use curly braces and semicolons)
  2. CSS is also valid
  3. .scss extension

Sass(Syntactically awesome style sheets)

  1. Use indentation
  2. CSS code is not valid
  3. .sass extension

Alt Text

Variables

You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.

When Sass is converted into CSS the variable are not converted but the property is stored directly.
Alt Text

Maps

Maps in Sass hold pairs of keys and values, and make it easy to look up a value by its corresponding key.
Alt Text

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
Alt Text
In the above example ul is nested in class .nav
Alt Text
In the above image some more ways to nest are shown. & always refers to the upper selection.

Partials

You can create partials containing small snippets of css or sass. It can be very useful in maintaining large modules. A partial file is named leading underscore like _partial.scss. And it can be used in other file by @use rule or @import rule.

Alt Text

@use

The @use rule loads mixin, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules with useful functions.

@import

Sass extends the @import rule is like @use. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. This makes everything global.
Because of some properties of @import, using @use is more preferred

@mixin

It allows you to define style that can be used several times.
Alt Text
We can pass arguments in mixin that makes it customizable every single time we call. We can also set default argument value like in the example below.
Alt Text

@function

The features allow you to define complex operations on the Sass Script values which you can reuse throughout your stylesheet. They facilitate the abstraction of common formulas and behavior in a clear way. Like every other function syntax it follows the same.
Alt Text
In the above image we have created a sum function.

Although it is technically feasible for functions to have side effects like setting global variables, this is strongly discouraged. Use functions just to compute values and mixin for rest.

@extend

There are times when we have to use all the styles of another class and we have to add just some specific properties. This is the case when we use @extend.

Alt Text

Operators

We can also do some math operations using sass.
Alt Text
For performing operations the quantities must have same unit like px, rem or %.

All basic things are included. There are some other properties like @ error, @warn, @debug, @at-root, etc. But they are not used most of the times.

For more information read the official documentation or comment below.

Discussion (0)