{ "componentChunkName": "component---src-templates-post-js", "path": "/you-must-know-about-sass/", "result": {"data":{"markdownRemark":{"html":"

Understanding Sass: CSS Made Awesome

\n

Everything you should know about Sass

\n

While CSS is getting powerful day by day, it still lacks certain features (such as code reuse) that makes it harder to maintain when the projects get bigger and more complex.

\n

There are many CSS methodologies (such as OOCSS, SMACSS) that help us write more maintainable CSS code, but these methodologies alone aren’t enough to solve the problem of maintaining large CSS codebases.

\n

That’s where Sass comes into play. Sass provides us features and tools that regular CSS doesn’t have, using Sass we can write more readable, maintainable and reusable CSS code.

\n

So in this article, I will dive into what Sass is, how to compile Sass code into regular CSS and discuss it’s features that makes it so powerful.

\n

Suggestion: Use **Bit** to build faster with components. It turns components into reusbale building blocks you can easily share, use and develop from any project. It can help your team share and collaborate on your components.\nComponent Discovery and Collaboration · Bit\n*Bit is where developers share components and collaborate to build amazing software together. Discover components shared…*bit.dev

\n

So without further ado, let’s get started :)

\n

What is Sass?

\n

If you know CSS or if you are learning CSS, then you must have heard about Sass. Sass is a CSS preprocessor, a superset of CSS that adds features that aren’t available in regular CSS.

\n

A CSS preprocessor is a language that extends CSS, adds features to CSS and gets compiled into regular CSS. A CSS preprocessor helps developers to write cleaner and easier to understand CSS code.

\n

Some well known CSS preprocessors are: SASS, LESS, and Stylus.

\n

Sass or SCSS?

\n

There are two syntaxes available for Sass. 1) **SCSS **and 2) Sass

\n
    \n
  1. \n

    SCSS known as Sassy CSS is a newer and most used version of Sass. It has a similar syntax to CSS because it’s a language extension or a superset of CSS. So a valid CSS is also a valid SCSS. Its file extension is .scss.

    \n
    2. \n
  2. \n

    Sass is an older syntax of Sass. It uses indentation rather than brackets. Its file extension is .sass.

    \n
    3. \n
\n

In this article, I will use SCSS syntax of Sass.

\n

Installing Sass

\n

Browsers do not understand Sass, in order for browsers to understand the Sass code we write, we have to convert it into regular CSS code. We do this by running Sass compiler which converts our Sass code to into regular CSS code.

\n

Getting Started:

\n

Before starting, you must have npm installed on your computer, which comes bundled with Node.js, you can install it from here.

\n

Folder Structure:

\n

Let’s first create the below folder in which we will install Sass.

\n

\"FolderFolder Structure

\n

You can create the above directories with these commands.

\n
mkdir sass-demo\ncd sass-demo\nmkdir -p sass css
\n

Initialize the Project Directory:

\n

All projects that use the node package manager(npm) must be initialized. To initialize the project enter below command in a terminal. This will create a package.json file.

\n
npm init -y
\n

Installing node-sass

\n

node-sass is a sass compiler. This command will install node-sass as dev dependency.

\n
npm install node-sass --save-dev
\n

Compiling Sass Code to CSS

\n

Create an npm script to compile the Sass code into CSS code. Add this script inside the script section of the package.json file.

\n
\"compile-sass\": \"node-sass sass/main.scss css/style.css\"
\n

Here main.scss is our main Sass file, and style.css is the compiled CSS file.

\n

We can also add a --watch flag. The watch flag tells Sass compiler to watch your source files for changes, and re-compile CSS each time you save your Sass files. For example:

\n
\"compile-sass\": \"node-sass sass/main.scss css/style.css --watch\"
\n

Finally, we can compile our Sass code into CSS by running below command in the terminal.

\n
npm run compile-sass
\n

Sass Features

\n

Now that we know what Sass is, and how to install Sass, let’s dive into various features of Sass that makes it so powerful.

\n

1# Variables

\n

Variables are one of the most useful features of Sass. Variables allow us to define certain values and reuse them across the code. Variables in Sass are similar to variables in JavaScript. In Sass, variables always start with a $.

\n

For example:

\n
$variable-name: variable-value;
\n

Let’s take a look at below HTML:

\n
<div class=\"heading\">\n  <h1 class=\"heading-primary\">This is a primary heading</h1>\n  <h2 class=\"heading-secondary\">This is a secondary heading</h2>\n</div>
\n

Let’s define two variables for primary and secondary colors:

\n
$color-primary: #55c57a;\n$color-secondary: #7ed56f;
\n

Let’s style the above headings in Sass:

\n
.heading-primary {\n  color: $color-primary;\n  text-align: center;\n  margin-top: 10px;\n}\n\n.heading-secondary {\n  color: $color-secondary;\n  text-align: center;\n  margin-top: 15px;\n}
\n

The above code will be compiled into below CSS code:

\n
.heading-primary {\n  color: #55c57a;\n  text-align: center;\n  margin-top: 10px;\n}\n\n.heading-secondary {\n  color: #7ed56f;\n  text-align: center;\n  margin-top: 15px;\n}
\n

After compiling, the variables will be replaced by their actual values in CSS.

\n

2# Nesting

\n

Nesting is another most useful feature of Sass. CSS doesn’t support selector nesting. Using nesting, we can nest child selectors inside the parent selector.

\n

For example, consider the below HTML:

\n
<nav class=\"navigation\">\n  <ul>\n    <li>Home</li>\n    <li>About</li>\n    <li>Contact</li>\n  </ul>\n</nav>
\n

Without Sass, we’d have to write the following CSS code:

\n
.navigation {\n  background-color: yellow;\n  padding: 20px;\n}\n\n.navigation ul {\n  list-style: none;\n}\n\n.navigation li {\n  text-align: center;\n  margin-top: 20px;\n}
\n

Notice that we have to repeat the navigation class name every time we want to style its children. With Sass, we can write cleaner and less repetitive code. For example:

\n
.navigation {\n  background-color: yellow;\n  padding: 20px;\n\n  ul {\n    list-style: none;\n  }\n\n  li {\n    text-align: center;\n    margin-top: 20px;\n  }\n}
\n

3# Mixins

\n

Mixins are yet another powerful feature of Sass. Using mixins, we can reduce code redundancy and increase code reuse. A mixin is a reusable piece of code which is similar to functions. For example, we can define a mixin as following:

\n
@mixin mixin_name() {\n  /* code */\n}
\n

Let’s take a look at below HTML:

\n
<div class=\"box\">\n  <div>\n  </div>\n</div>
\n

Sass code:

\n
.box {\n  background-color: red;\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  \n  div {\n    width: 200px;\n    height: 200px;\n    background-color: blue;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n}
\n

Here we are positioning the inner div at the center of the outer div. We can place the code inside a mixin called absCenterPosition. For example:

\n
@mixin absCenterPosition() {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}
\n

We can include the above mixin in our code by using @include directive, for example:

\n
.box {\n  background-color: red;\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  \n  div {\n    width: 200px;\n    height: 200px;\n    background-color: blue;\n    @include absCenterPosition;\n  }\n}
\n

We can also pass arguments to the mixins. For example:

\n
@mixin box-shadow($x, $y, $blur, $spread) {\n  -webkit-box-shadow: $x $y $blur $spread;\n  -moz-box-shadow: $x $y $blur $spread;\n  -ms-box-shadow: $x $y $blur $spread;\n  box-shadow: $x $y $blur $spread;\n}
\n

We can include the mixin as:

\n
.box {\n  background-color: red;\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  \n  div {\n    width: 200px;\n    height: 200px;\n    background-color: blue;\n    @include absCenterPosition;\n    *@include* box-shadow(0, 5px, 5px, rgba(0, 0, 0, 0.7));\n  }\n}
\n

4# Functions

\n

Functions in Sass are similar to functions in JavaScript. Just like JavaScript, functions in Sass can accept arguments and return some value. For example:

\n
@function divide($a, $b) {\n  @return $a / $b;\n}\n\ndiv {\n  margin: divide(60, 2) * 1px;\n  height: 200px;\n  width: 200px;\n}
\n

5# Partials and Import

\n

Partials in Sass are separate files containing Sass code that make our code modular. Using partials, we can have separate Sass files for different components.

\n

A partial’s name always starts with an underscore(_). We use an @import directive to import partial into another Sass file. For example, we can import the _header.scss file into main.scss file.

\n
// main.scss\n@import 'header';
\n

When importing a partial, we can omit the underscore(_) and .scss file extension.

\n

Unlike CSS imports, Sass imports don’t send another HTTP request for fetching the partial, because during compiling all the imports are placed in a single CSS file.

\n

#7 Inheritance/Extend

\n

In Sass, we can extend CSS properties from one selector to another. For this, we use the @extend directive.

\n

Generally, for inheritance we use placeholder classes which starts with a %, the advantage of using placeholder classes is that it only prints in compiled CSS when it is extended, and can help keep your compiled CSS neat and clean.

\n

For example:

\n
%panel {\n  background-color: blue;\n  border: 2px solid red;\n}\n\n.small-panel {\n  @extend %panel;\n  width: 70px;\n  height: 70px;\n}\n\n.big-panel {\n  @extend %panel;\n  width: 200px;\n  height: 200px;\n}
\n

This will be compiled into following CSS.

\n
.small-panel,\n.big-panel {\n  background-color: blue;\n  border: 2px solid red;\n}\n\n.small-panel {\n  width: 70px;\n  height: 70px;\n}\n\n.big-panel {\n  width: 200px;\n  height: 200px;\n}
\n

6# Ampersand (&) operator

\n

The ampersand (&) operator is another useful feature of Sass. This operator is particularly useful when you are using BEM methodology.

\n

Let’s take a look at below HTML:

\n
<button class=\"btn btn--green\">Hello World</button>
\n

If we have to style it without the & operator, we’d do something like this:

\n
.btn {\n  display: inline-block;\n  padding: 5px 8px;\n}\n\n.btn--green {\n  background-color: green;\n}\n\n.btn:hover {\n  background-color: transparent;\n}
\n

But we & operator we can do it like this:

\n
.btn {\n  display: inline-block;\n  padding: 5px 8px;\n\n  &--green {\n    background-color: green;\n  }\n\n  &:hover {\n    background-color: transparent;\n  }\n}
\n

So using & operator, we can nest selectors that share the same name, and during compile time the & operator will be replaced by its enclosing selector name.

\n

5# Directives

\n

There are many directives in Sass. For example, @extend, @mixin, and @import are some of the directives that we have seen above. There are many more directives in Sass, such as @if, @else, @for, @while.

\n

@if and @else directives

\n

The @if and @else directives are similar to if and else statements in JavaScript. For example:

\n
@mixin text-color($val) {\n  @if $val == error {\n    color: red;\n  }\n  @else if $val == warning {\n    color: yellow;\n  }\n  @else if $val == success {\n    color: green;\n  }\n  @else {\n    color: black\n  }\n}\n\n.heading {\n  @include text-color(error);\n}
\n

Here, we are using a mixin text-color which accepts an argument $val. We can have a different color for the heading depending on the value passed to the mixin.

\n

@for and @while directive

\n

The @for and @while directives are similar to for and while loops in JavaScript. For example:

\n
@for $i from 1 through 4{\n  .col-#{$i} {\n     width: 100% / $i;\n  }\n}
\n

We use #{} to use variables inside a selector name and other CSS functions. This will be compiled into following CSS.

\n
.col-1 {\n  width: 100%; \n}\n\n.col-2 {\n  width: 50%; \n}\n\n.col-3 {\n  width: 33.33333%; \n}\n\n.col-4 {\n  width: 25%; \n}
\n

We can also implement the above code using the @while directive. For example:

\n
$i: 1;\n@while $i < 5 {\n  .col-#{$i} {\n     width: 100% / $i;\n  }\n  $i: $i + 1;\n}
\n

This will be compiled into following CSS:

\n
.col-1 {\n  width: 100%; \n}\n\n.col-2 {\n  width: 50%; \n}\n\n.col-3 {\n  width: 33.33333%; \n}\n\n.col-4 {\n  width: 25%; \n}
\n

Conclusion

\n

We have learned what Sass is, how to install it locally and discussed it’s features that makes it so powerful. Sass adds basic programming capabilities to CSS.

\n

Using Sass, we can perform basic calculations, reuse code using mixins, and create functions. Sass makes maintenance of CSS so much easier in bigger projects.

\n

That’s it and if you found this article helpful, please click the clap 👏button, you can also follow me on Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)

","excerpt":"Understanding Sass: CSS Made Awesome Everything you should know about Sass While CSS is getting powerful day by day, it still lacks certain…","fields":{"slug":"/you-must-know-about-sass/"},"frontmatter":{"title":"Everything you should know about Sass","date":"June 01, 2022","tags":["web-design","sass","css"],"description":"Everything you should know about Sass"}}},"pageContext":{"slug":"/you-must-know-about-sass/","previous":null,"next":{"id":"fdeed646-8e02-5f4d-b1e7-20109f4a61db","frontmatter":{"title":"Using React Hooks for Your Forms with Validation","tags":["reactjs","javascript"],"categories":["reactjs","javascript"],"template":"post"},"fields":{"slug":"/using-react-hook-forms-for-validation/"}}}}, "staticQueryHashes": ["352937542"]}