How to get started with Sass or SCSS – Part II

Hey everyone,

Welcome to second and final part of our “How to get started with Sass or SCSS” tutorial. In this part we will learn some basic features and scripting techniques to use and work with Sass to generate CSS for our awesome looking and responsive websites.

In our first part of this tutorial here, we have already learnt about importance and need to use Sass, two different Sass syntax, how to install Sass on a machine and how to pre-process or compile Sass files to browser compatible CSS files.

How to read this tutorial

I would again suggest you to read any programming tutorial, specially getting started guides, by doing practice yourself. Because, practicing is always better and a recommended way to learn something new. Therefore, I would suggest you to install Sass on your machine if you haven’t already installed it by following instructions given here. Also setup a practice project and use an IDE or any other plain text editor to practice all different basic Sass concepts that we will be discussing in this tutorial.

Are you Ready? Let’s get started with Sass basics.

Variables

Variable in programming are basically a way to store information and data. If you don’t know about variables, a core concept of any programming or scripting language, I would recommend you to read about programming variables here.

Sass variables are also no different. In Sass we use variables to store information or CSS properties or values that we want to use at least one or more times in our style-sheet.

Although, we can declare or make anything a variable, but it’s recommended to declare only information that we want to reuse, or information that is going to change often, as a variable. For example my website’s theme colors can be declared as variables; As it will help me to reuse same color value on different places using one variable. And if I want to change any color I can do that easily by just replacing it once and recompiling my Sass file. Let’s try to better understand this concept with an example.

Here are some colors from current theme of my website.

/*
 
Website background color -> #121212
Primary color -> #ffffff
Secondary color -> #8c8c8c
Primary anchor/link color -> #117fd9
Default border or line color -> #2c2c2c
…
…

*/

As you can already see that there can be so many color variants in a single website. And what if we want to change secondary color of my website? I will have to manually edit the CSS file and carefully find & replace secondary color in whole file, wasting both my time and energy. But, if I have declared secondary color of my website as a variable in my Sass file. It will hardly take a minute to change value of secondary color variable and recompile the file.

Here is how a Sass file, using SCSS syntax, with all these color variables might look like.

$background-color: #121212;
$primary-color: #ffffff;
$secondary-color: #8c8c8c;
$primary-link-color: #117fd9;
$default-border-or-line-color: #2c2c2c;

body {
  background-color: $background-color;
  color: $primary-color;
}

h3, span, pre, small, code {
  color: $secondary-color;
}

a {
  color: $primary-link-color;
}

input, table, td {
  border: 1px solid $default-border-or-line-color;
}

You might have noticed ‘$’ sign at start of different strings in above code. Using ‘$’ with a string label or literal is a way to tell Sass that this label is our Variable. So whenever we use ‘$’ with a label it will become a variable for Sass. String after ‘$’ will become variable name and anything written between ‘:’ and ‘;’ will become variable value. We can use variable name anywhere in our Sass file. Let’s create a new file name variables.scss and copy above code in it.

Now compile variables.scss file by executing below given command.

> scss variables.scss variables.css

If you open the generated variables.css file you should see similar code as below.

body {
  background-color: #121212;
  color: #ffffff;
}

h3, span, pre, small, code {
  color: #8c8c8c;
}

a {
  color: #117fd9;
}

input, table, td {
  border: 1px solid #2c2c2c;
}

You can easily figure out the changes/updates made by Sass compiler in our variables.scss file. It has replaced all of our variables with the actual value to generate final CSS for us. This is how Sass help us to save time and keep our style-sheet consistent.

This is just one example of using variables in Sass, we can use variables to declare font family or typography of our website, font sizes, spacing, margins, padding, etc.

Mixins

Variables are great to work with single value or property. But, what if we want to create a small group or set of properties that can used more than one time in our CSS? For example, I only want to declare font family/stack, font size and primary color of my website as a group named ‘normal-text-style’. Or I don’t want to repeat or rewrite some CSS3 vendor prefixes in my stylesheet, that includes -webkit-, -moz-, -ms-, etc.

Sass has provided a simple solution in form of ‘Mixins’ to overcome this problem. You can think of these as simple functions that accept zero or more variables and just return output by replacing variable values accordingly. If you don’t know about programming functions, you can read about those here in a simple tutorial.

You will have to use @mixin directive or at-rule before the name of your ‘Mixin’ or function to declare a ‘Mixin’ in Sass. And you will have to use @include directive or at-rule to use or call a ‘Mixin’ anywhere in your Sass or SCSS scripts.

Here is how you can use ‘Mixin’ in Sass.

$primary-color: #ffffff;
$font-family: Arial, sans-serif;

@mixin normal-text-style($font, $font-size, $color) {
  font-family: $font;
  font-size: $font-size;
  color: $color;
}

@mixin translate-50($transform-value) {
  -moz-transform: $transform-value;
  -ms-transform: $transform-value;
  -webkit-transform: $transform-value;
  transform: $transform-value;
}

/* A mixin or function that will group and return styles for our normal body text */
body {
  @include normal-text-style($font-family, 12, $primary-color);
}

/* Another example of using mixin for vendor prefixes */
span.round {
  @include translate-50( translate(-50%, -50%) );
}

In above Sass, or SCSS, code we have created and used two Mixins with names ‘normal-text-styles’ and ‘transform-50’. Both mixins are also accepting one or more property values or variables as arguments.

Just copy paste above code in a .scss file and compile it by using sass command to see final CSS output. Here is how you final CSS will look like if don’t change anything yourself.

/* A mixin or function that will group and return styles for our normal body text */
body {
  font-family: Arial, sans-serif;
  font-size: 12;
  color: #ffffff;
}

/* Another example of using mixin for vendor prefixes */
span.round {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

You can see that how Sass converted our SCSS code to a fully functional CSS by using variables and mixins.

Nesting

Sometime we want to apply custom styles to nested or child elements of a parent container. For example, in my website we needed different styles for social media icon links in footer.

Here is HTML of footer social links

<ul class="ftco-footer-social list-unstyled">
  <li>
    <a href="https://www.facebook.com/zeeshan.elahi/">
      <span class="icon-facebook"></span>
    </a>
  </li>
  <li>
    <a href="https://twitter.com/zeeshan_elahi">
      <span class="icon-twitter"></span>
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/in/zeeshanelahi/">
      <span class="icon-linkedin"></span>
    </a>
  </li>
  <li>
    <a href="https://www.instagram.com/zeeshanelahi.official/">
      <span class="icon-instagram"></span>
    </a>
  </li>
</ul>

One way was to create separate classes for each element and use it in class attribute of each element, but there is another easy way to write CSS for nested elements. Here is our final CSS for social media icon links in footer.

ul.ftco-footer-social li {
  display: inline-block;
  list-style: none;
  margin: 0 10px 10px 0;
}
ul.ftco-footer-social li a {
  background: #ffffff80;
  border-radius: 50%;
  display: block;
  float: left;
  height: 60px;
  position: relative;
  width: 60px;
}
ul.ftco-footer-social li a span {
  font-size: 26px;
  left: 50%;
  position: absolute;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
ul.ftco-footer-social li a:hover {
  color: #fff;
}

Although, this CSS will work perfectly as per our requirements. But, if you compare above CSS with our HTML, you would notice that our HTML has proper indentation and nesting for all elements starting from top level element, i.e. ul, and going to most inner level element, i.e. span, and this style of writing HTML make it very easy to read and understand.

This CSS syntax will be easier to understand for people with basic knowledge of CSS. But, if someone who is coming from different background, like web or mobile development, will have some difficulty reading and understanding this CSS at start. As Sass is a scripting language that’s why they decided to go with a more programmer friendly syntax to write Sass code for nested elements. In Sass you can nest elements just like we do in HTML, therefore, anything enclosed in curly brackets ‘{}’ will be consider as a child or nested style. Here is a SCSS code of above CSS.

ul.ftco-footer-social {

  li {

    display: inline-block;
    list-style: none;
    margin: 0 10px 10px 0;

    a {

      background: #ffffff80;
      border-radius: 50%;
      display: block;
      float: left;
      height: 60px;
      position: relative;
      width: 60px;

      span {
        font-size: 26px;
        left: 50%;
        position: absolute;
        top: 50%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

    }

    a:hover {
      color: #fff;
    }

  }

}

I would recommend you to copy & paste this code or type it yourself in a .scss file and try to compile it to see final output.

You will realize that SCSS code is much more easier to code and understand. And it will be eventually converted to browser compatible CSS by Sass compiler, therefore, no need to worry.

Modules

Because, Sass is a scripting language that’s why they have tried to solved some common problems with CSS syntax and files just like any other programming or scripting language. Another common problem with CSS was that sometime CSS files increased too much in size that it become difficult to maintain code of a single website, also there was no way to re-use CSS written in one file in another file.

Therefore, Sass introduced a way to divide our code in multiple files and re-use it just like any other programming or scripting languages. For example, if you want to store all your theme colors as variables in a separate file and want to refer those variables in one or more different files.

Here is how you would do this using Sass. Let’s create a ‘_color.scss’ file and copy paste below given theme color variables in it.

$background-color: #121212;
$primary-color: #ffffff;
$secondary-color: #8c8c8c;
$primary-link-color: #117fd9;
$default-border-or-line-color: #2c2c2c;

small {
  font-size: 8px;
}

Now the question may be, how can we use these variables in an another file? Don’t worry, for this Sass has provided another at-rule, i.e. @use. This rule will load a Sass file as a module in another Sass file.

Let’s create another file name ‘main.scss’ and load ‘_color.scss’ as a module in it by using a @use rule. Here is how you can load ‘color.scss’ in you ‘main.scss’ file.

@use ‘colors’;

Above line will do two things. First, it will ask Sass to lookout for a .sass or .scss file with name ‘colors’ in same directory where we have main.scss file. Second, it will load all variables, mixins and useful scripts as a module name ‘colors’ in ‘main.scss’ file. Also note that we don’t need to use file extension with @use directive. Sass will automatically figure it out and load required file for you. And you can load both type of files as a module in your main file. i.e. you can load .sass or .scss file in you main file using @use directive.

Now how can we refer our color variables in main.scss file. Because, if you try to refer those variables directly by their name, it will not work and Sass compiler will throw an error. For example try to put below given line in you main.scss file and try compiling it.

body {
  background-color: $background-color;
}

Yes, Sass compiler will throw an error of undefined variable like this.

Error: Undefined variable.
  ╷
4 │   background-color: $background-color;
  │                     ^^^^^^^^^^^^^^^^^
  ╵
  app/sass/modules.scss 4:21  root stylesheet

Because, we have moved our $background-color variable to ‘colors.scss’ file. Although, we have loaded it in our ‘main.scss’ file. But, module variables can’t be referred directly. So, how can we refer a module variable? Sass has again provided a more programmer friendly solution for this. If you have studied or used a Object-Oriented Programming before, you might know the solution already. But, if you are new to programming then this might be a new concept for you. Although, it’s very simple and you will get used to it very quickly.

To access a module variable, or a variable from another file that has been loaded as a module in a file, we use dot-notation. This how you can remember use of dot-notation in Sass.

Background-color: <module name>.<variable name>;

So we will have to use our module name, i.e. colors, for this example, a dot (.) character and use our variable name after the dot. So our above statement will be changed to this.

body {
  background-color: colors.$background-color;
}

Now save your file and compile it to check the output. You will see that Sass will successfully compile it without any issue. And when you will open your CSS file you will see that Sass has replaced colors.$background-color with its actual value from ‘colors.scss’ file.

So, you see how Sass helped us solve another problem with CSS quite easily and efficiently. By the way, it’s not just our Sass variables that can be used to load with a module. We can also move our ‘Mixins’, ‘Functions’ and static CSS to a separate file and load it as a module in another file. It’s just that we can’t refer static CSS styles and properties in our loading or main file. But, Sass will copy all our static CSS in our main file and replace our @use directive with that static CSS. I think you should give it a try as well. Just put some static CSS in your ‘colors.scss’ file and recompile ‘main.scss’ file to see the results yourself.

By the way, if you want to learn more about Object-Oriented Programming, you might find this pocket guide very helpful to learn some basics of Object-Oriented Programming here.

Extend/Inheritance

Inheritance is again an important and core feature that Sass has borrowed from Object-Oriented Programming (OOP) and implemented in its own scripting style. I said “in its own scripting style”, because, it’s not really inheritance that we see in typical OOP languages. But, it has some similarities. Inheritance in Sass helps you to write your CSS styles once in Sass and use those one or more time in your Sass files. Or in other words it helps you to follow a programming principle called DRY, which means Don’t repeat yourself, by allowing you to write your CSS or code once and use it one or more times.

Inheritance can be implemented in Sass using an at-rule, i.e. @extend, and place-holder CSS classes. And what are place-holder CSS classes? You can think of these as a set of CSS styles that Sass compiler only use or call when another CSS class inherit or extend from these. We use ‘%’ symbol to declare a place-holder CSS class.

Here is a working example of Inheritance in Sass using @extend and % place-holder classes.

/* This will create a place-holder class name 'alert-messages' */
/* Start of alert-messages */
%alert-messages {
  border: 1px solid transparent;
  border-radius: .25rem;
  margin-bottom: 1rem;
  padding: .75rem 1.25rem;
  position: relative;
}
/* End of alert-messages */

/* This will also declare a place-holder class. */
/* But as we will not extend any other class from it */
/* Sass compiler will not print/include it in final CSS */
/* Start of unused-place-holder-class */
%unused-place-holder-class {
  colr: #ffffff;
  background: #000000;
}
/* End of unused-place-holder-class */

/* A CSS class that will inherit basic styles from a place-holder class using @extend */
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
  @extend %alert-messages;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  @extend %alert-messages;
}

Here is the final output generated from Sass compiler.

/* This will create a place-holder class name 'alert-messages' */
/* Start of alert-messages */
.alert-danger, .alert-primary {
  border: 1px solid transparent;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1.25rem;
  position: relative;
}
/* End of alert-messages */

/* This will also declare a place-holder class. */
/* But as we will not extend any other class from it */
/* Sass compiler will not print/include it in final CSS */
/* Start of unused-place-holder-class */
/* End of unused-place-holder-class */

/* A CSS class that will inherit basic styles from a place-holder class using @extend */
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

You should notice two important things in above output. First, Sass compiler has not printed unused-place-holder-class in final output. Because, we never used or extend it. Second, it has replaced %alert-messages place-holder class name with class names which have used this place-holder class using %extend at-rule, which is a standard to write and use same CSS properties for multiple classes. And this will help us to avoid using multiple class names to use CSS styles from different classes. For example, we could have declared a class name .alert-messages instead of a place-holder class. But, we will have to use both .alert-messages and say .alert-primary in our class attribute of HTML element where we would like to use these styles.

Operators

Because, Sass is scripting language that’s why it also support another important feature of programming by allowing use of different numeric or calculation, logical or boolean, equality check, relational and string manipulation related operators in your code.

Numeric operators include +, -, * (multiply), / (divide), % (reminder), etc for different mathematical operations.

Logical or Boolean operators include and, or and not.

You can found complete list of available operators on Sass official website here.

Functions and @ at-rules

Functions are another core programming features. In programming, functions are basically a piece of code or set of instructions or code lines that help you to perform a specific task. You can read more about programming functions, or I usually call these The Specialists, here.

Sass functions help you to separate some complex calculation and logic from your styles and classes. And also you can re-use functions by calling those anywhere in your Sass file by using the name and passing required parameters. You can read more about Sass functions here in more detail.

Sass also provide a handful set of at-rules to provide some extra functionality and features to work with your CSS. at-rules are basically pre-define set of rules and functionality that enable us to use some very powerful features of Sass including Mixins, Functions, Inheritance, etc. You can find a complete list of Sass at-rules here in more details.

Conclusion

I designed this how-to guide or tutorial to help people, with basic understanding of web development and designing, to get started with Sass and SCSS. There are also some advance features of Sass that I haven’t discussed here. But, I would encourage you people to visit Sass official website to explore and to build further understanding.

Here is what you should do now.

1. Pick a simple one page website design template and convert it to HTML template using Sass or SCSS. Always ready to get your hands dirty and try to practice everything you would like to remember for longer time. You can find all code samples of this tutorial in this GitHub repository.
2. Explore and learn all available features of Sass by visiting their official website, reading a book or watching some YouTube video tutorials.

Or if you still want someone to closely work with you and guide you with everything related to Sass programming, you can contact me here on my website for In-Person online coaching sessions. We can discuss my availability and fee further in detail depending upon your wish list of Sass features that you want to learn and need my help for it.

See you another How-to guide or Programming course some other time.

Allah Hafiz