DEV Community

Ayushman
Ayushman

Posted on • Originally published at ayushmanbthakur.com on

Step Up Your CSS Game With SASS - SASS for Beginners

So, recently I was experimenting with SASS and it is awesome. Once you get a hang of it, it is really difficult to get back to normal CSS. Now, without further adieu let's jump into the details of SASS. But before starting, a disclaimer, everything done in SASS can be done in CSS, SASS just makes thing easier.

What is SASS?

The acronym SASS stands for Syntactically Awesome Style Sheet. It is basically a CSS pre-processor which will be compiled down to normal CSS. Now, there are two versions of SASS: The actual SASS which works based on indentation, and the SCSS, which is syntactically very similar to normal CSS and will be used by me for this post.

The Perks of SASS over CSS

So, let's see why we need a CSS pre-processor like SASS to work with:

1. The nesting of element styles:

Suppose you have this HTML layout in your page:

<div class="container">
    <h1>Hello World</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

Now if you want to style this specific h1 in CSS you have to write like this:

.container h1{
    /* Your style goes here */
}
Enter fullscreen mode Exit fullscreen mode

But in similar condition with SCSS you can directly nest the h1 style inside the .container specific style like so:

.container{
    // container style goes here
    h1{
        // h1 style goes here
    }
}
Enter fullscreen mode Exit fullscreen mode

That way if you change any style, for example, background-color of the container, which may demand style change in the h1 as well, then you don't have to search the whole document for that specific .container h1. Instead, you can easily find it nested inside the .container class. This brings me to the next point beautiful about SASS,

2. Organized:

SCSS keeps your code organized. In normal CSS, the element related :hover, :active, ::before, ::after etc. can be created anywhere. But, the nesting feature of SCSS helps us to keep the code organized. You can easily define :hover like so:

.container{
    // code here
    &:hover{
        // code here
    }
}
Enter fullscreen mode Exit fullscreen mode

If you are wondering, then this "&" is used to reference the parent under which the code is being written. So, in this case, the &:hover translates to .container:hover.

3. Browser Compatibility Coverage:

As SCSS is compiled to normal CSS, so it compiles the given CSS to the normal property as well as legacy browser compatible -ms , -moz, -webkit properties. For example:

The SASS/SCSS I Wrote:

.container {
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

The CSS generated:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Now you might be asking, but Ayushman, how to get started with this adrenaline injected version of CSS.

4. Multi file Setup:

You can have multiple files imported into the main SCSS code as a partial. In that case, the partials won't be translated to separate files and will be written down into one file. In that way, your code stays modular and easy to access. For example:

in _variable.scss:

//Having the _ in the name makes any compiler to treat the file as a partial file hence that is not translated it into a different file

//the notation below is the declaration of a variable in SCSS
$primary-color: #234467;
Enter fullscreen mode Exit fullscreen mode

in style.scss:

// this imports the _variables.scss
@import "./_variables.scss";

.container{
    bacground-color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

So, now if I compile it then the CSS generated will be:

.container {
  background-color: #234467;
}
Enter fullscreen mode Exit fullscreen mode

That means the value of primary-color is brought from _variables.scss and put into the compiled version of the code.

Getting Started with writing SCSS code

There are many ways to set up SCSS in your project. There is a package called node-sass for npm users which convert SCSS to CSS. But, in this post, I will be telling you an easier way to get started with SASS. If you use Visual Studio Code there is a nice extension named Live Sass Compiler which depends on another extension named Live Server. Both these extensions are developed by Ritwick Dey. With the help of this extension, whenever you write SCSS code you will get a Watch SASS button. Picture of Watch Sass Button

Clicking this button while working on a SASS file will generate a filename.css and filename.css.map file in the working directory. Referencing this CSS file will let you use SCSS to write required style and then have it compiled to normal CSS, which can be understood by the browsers.

So, with that let's have a look at how to use basic SCSS to step up your CSS game.

Variables:

Though implemented in CSS. But I think at this moment the variables scene in CSS is half baked. But, the variables in SCSS are really robust. It is really easy to update variables and use them

Extending the style of another element:

How many times have you wondered to have some style defined in one element also applied to another? Instead of having a lot of classes attached to your HTML element, you can extend those properties.

Here is a basic example of extending properties:

.container {
    background-color: darkgray;
}

.block {
    @extend .container;
    color: green;
}
Enter fullscreen mode Exit fullscreen mode

This translates to this CSS:

.container, .block {
  background-color: darkgray;
}

.block {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

Using mixins

How many times you have to write the display flex and justify-content center just to display items in the center of the page. That's where mixins drop in. Using mixins we can use a specific piece of code repeatedly, and if we need a change there is only one place we need to change the code.

Here is a basic example of mixin:

@mixin flex-center {
    display: flex;
    justify-content: center;
}

.container {
    @include flex-center();
}
Enter fullscreen mode Exit fullscreen mode

This translates to this CSS:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

As you can tell from this line: flex-center() these mixins can have arguments too. For example, in the previous example if we wanted to have a different background for different elements implementing flex-center mixin we can do this:

@mixin flex-center($bgcolor: transparent) {
    display: flex;
    justify-content: center;
    background-color: $bgcolor;
}

.container {
    @include flex-center();
}

.container_2 {
    @include flex-center(yellow);
}
Enter fullscreen mode Exit fullscreen mode

The $bgcolor is the argument given to the mixin and the default value is given as transparent.

Now, in container_2 I passed the argument as yellow. So, the compiled code looks like:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: transparent;
}

.container_2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

if-else statement

Do you know, in SCSS you can also have if-else statements? For example, in the previous example, if we have a dark background we need to set the text color to white. We can set up our previous example like this, we can pass another variable making dark-background true and false:

@mixin flex-center($bgcolor: transparent, $dark-bg: false) {
    display: flex;
    justify-content: center;
    background-color: $bgcolor;

    @if $dark-bg {
        color: #ffffff;
    }

    @else {
        color: #000;
    }
}

.container {
    @include flex-center(black, true);
}

.container2 {
    @include flex-center(yellow, false);
}
Enter fullscreen mode Exit fullscreen mode

This translates to this CSS:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: black;
  color: #ffffff;
}

.container2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: yellow;
  color: #000;
}
Enter fullscreen mode Exit fullscreen mode

Functions

There is a lot of confusions regarding functions and mixins in SCSS. While mixins let you have some CSS properties implemented for a specific class, functions help us to have values returned for specific things. For example, we can set white text for a div with a dark background and black text for div with a light background using functions like so:

@function return_text_color($bgcolor) {
    @if lightness($bgcolor)<50 {
        @return white;
    }

    @else {
        @return black;
    }
}

.container {
    background-color: black;
    color: return_text_color(black);
}

.container2 {
    background-color: yellow;
    color: return_text_color(yellow);
}
Enter fullscreen mode Exit fullscreen mode

The compiled CSS looks like:

.container {
  background-color: black;
  color: white;
}

.container2 {
  background-color: yellow;
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

Here, I used a built in function in SCSS for detecting the lightness of a color.

Bonus: Using Mixins and Functions together

So, it will be a nice idea to end this post by using the last mixin along with the last function I wrote. It will make the text centered and properly colored. But, disclaimer, I was having some problem with transparent background, which can be fixed with another if statement. I left that as an exercise for the viewer.

The SCSS:

@function return_text_color($bgcolor) {
    @if lightness($bgcolor)<50 {
        @return white;
    }

    @else {
        @return black;
    }
}

@mixin flex-center($bgcolor) {
    display: flex;
    justify-content: center;
    background-color: $bgcolor;
    color: return_text_color($bgcolor);
}

.container {
    @include flex-center(#333);
}

.container2 {
    @include flex-center(yellow);
}
Enter fullscreen mode Exit fullscreen mode

The CSS:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #333;
  color: white;
}

.container2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: yellow;
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

There is a lot more to explore in the world of SCSS. But these features I mentioned are really cool to start with. Once you get the hang of SCSS, it is really hard to get back to CSS. Hope you make awesome projects with superpowers of SCSS. Stay happy, stay coding.

Top comments (0)