Introduction to SCSS

In this post, I would like to give an introduction and discuss the features of, SCSS. If you’re new to SCSS and you really haven’t read much about it you should definitely read this blog to get all the information.

Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Embrace Sass once, and you may never want to go back to vanilla CSS again. I didn’t realize how much I was enjoying working with Sass until recently when I had to switch back to vanilla CSS in a project. During that time, I learned so much that I decided to praise Sass and make this a better world and make you a happier person.

How to Use SCSS

Preprocessors such as Sass are widely used in our RoR world and make writing CSS much easier and clutter-free. Most Rails developers are aware of advantages such as nesting, reference selector, variables, mixins, or extending directives. But Sass is much more than that!

Sass includes two type extension: .scss and .sass. The ".scss" file extension and is fully compliant with CSS syntax and .sass is not fully compliant with CSS syntax, but it's quicker to write.

Let's start with some installation and basic tips for using Sass.

There are a couple of ways to start SCSS using the application or command line.

Take a look at the Sass Documentation for installation with the command line.

Variables

We can define an element in a variable and interpolate it inside our Sass code. This is useful when you keep your modules in separate files. The most common uses of variables are color palettes, storing information like font declarations, sizes, and media queries, that can be used in separate stylesheets.

For Example

$body: #226666;
$primary-color: #403075;
$footer: #AA8439;
$font-stack: Helvetica, sans-serif;

The pieces code starting with $ are Sass variables. You will be able to use those variables later in your stylesheet, and they will be mapped to the values that you have defined, like:

body {
  background: $body;
  font: $font-stack;
}

.header {
  color: $primary-color;
}

a {
  color: $primary-color;
}

Nesting With SCSS

Nesting is one most popular features of SCSS. With nesting, you can add classes between the braces of a declaration. SCSS will compile and handle the selectors quite intuitively. You can even use the “&” character to get a reference to the parent selector.

The following example shows the structure of a basic webpage:

The below style was used to create the above example:

header{
  padding:10px
  background-color: $grey
  text-align:center;
  .logo{
      display:inline-block;
      width:140px;
  }
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        display: inline-block;
       a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
          &:hover{
              text-decoration:underline;
          }
       }
      }
    }
}

section{
  background-color: $grey;
  display:inline-block;
  width:70%;
  border:1px solid $grey;
  color: $text-color;
}

aside{
  background-color: $grey;
  display:inline-block;
  width:30%;
  border:1px solid $grey;
  color: $text-color;
}
 footer{
   padding:10px;
   .copyright{
   text-decoration:none;
    padding:5px;
    &:hover{
            text-decoration:underline;
          }
   }
}

Great! Now nested styling working as expcted. Let's look at the corresponding CSS:

header{
  padding:10px
  background-color: #ded3d4;
  text-align:center;
}
header .logo {
   display:inline-block;
   width:140px;
 }
header nav ul{
   margin: 0;
   padding: 0;
   list-style: none;
}
header nav ul li{
   display: inline-block;
}
header nav ul li a{
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
header nav ul li a:hover{
   text-decoration:underline;
}

section{
background-color: #ded3d4;
  display:inline-block;
  width:70%;
  border:1px solid #ded004;
  color: #555;
}

aside{
background-color: #ded3d4;
  display:inline-block;
  width:30%;
  border:1px solid #ded004;
  color: #555;
}
footer{
   padding:10px;
}
footer .copyright{
  text-decoration:none;
  padding:5px;
}
footer .copyright:hover{
   text-decoration:underline;
}

Mixins and Extends 

Mixins and extends are powerful features that help to avoid a lot of repetition. With mixins, you can make parameterized CSS declarations and reuse them throughout your stylesheets.

Let’s say you have a box and you want to give the box rounded corners:

@mixin border-radius($round) {
  -webkit-border-radius: $round;
     -moz-border-radius: $round;
      -ms-border-radius: $round;
          border-radius: $round;

}

/*Just use '@include' directive to apply mixin */
.box { @include border-radius(15px); }

Notice the @mixin directive at the top. It has been given the name border-radius and uses the variable $round as its parameter. This variable is used to set the radius value for each element. After that, the @include directive is called with the parameter value, i.e 15px.

Here is the corresponding CSS:

.box {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  border-radius: 15px;
}

If you want to add different sizes for each corner while using the @including the directive, that can be also done; you just need to specify it as follows:

.box { @include border-radius(15px 10px 5px 0px); }

You can create your own library of mixins, or, even better, you can use one of the community libraries out there.

The @extend directive has been called one of Sass's most powerful features. This directive allows you to share properties from one selector to another.

Let’s say you declare a common class containing properties:

.box {
  margin: 10px;
  padding: 10px;  
  border: 2px solid blue;
}

And now you want two similar boxes with the same properties, but with different border colors.

.box-red {
  @extend .box;
  border-color: red;
}

.box-yellow {
  @extend .box;
  border-color: yellow;
}

In the above example, we extend the common class using the @extend directive. Let's see the full SCSS we need to get the desired output.

.box, .box-red, .box-yellow {
  margin: 1em;
  padding: 1em;
  border: 2px solid red;
}

.box-red {
  border-color: red;
}

.box-yellow {
  border-color: yellow;
}

Import

@import will be handled by Sass and all our CSS and SCSS files will be compiled to a single file that will end up on our live site. You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files, i.e. variable.scss, fonts.scss, buttons.scss, etc., and then we can include all SCSS files in the main/style.scss folder. If you don't import the partial files, then reusable components like mixin and variable will not work.

Let’s say you have created multiple files and that you need to import them into the main.scss file:

@import “variables”;
@import “fonts”;
@import “base”;
@import “buttons”;
@import “layout”;

The only drawback is that a separate HTTP request gets triggered for each CSS file that you are importing.