Introduction To Sass & SCSS

Let’s plunge into the world of CSS preprocessors, in particular, Sass (Syntactically Awesome Style Sheets) and SCSS (Sassy CSS). We’ll look at some definitions, how it works, and some examples.



CSS Preprocessors

You may have heard of CSS preprocessing and be wondering what all the buzz is about. You may even have heard of Sass or LESS.

In short, preprocessing your CSS allows you to write more concise stylesheets which are formatted nicely and require less repetitive techniques commonly found when writing CSS code.

CSS preprocessors are tools that allow us to code CSS a certain way, and process it into readable, pure CSS. These pure CSS files are what we ultimately need to link to in our projects, as this is the only CSS that browsers will understand. However, preprocessed CSS coding allow us to streamline our work and take on a more scalable approach to our programming. There are a few preprocessors out there, notably Sass (and SCSS), LESS, and Stylus. We’re going to take a plunge into Sass (my preprocessor of choice), see how it works, and look at some examples

The result is more dynamic styling and ample amounts of time saved when developing websites or applications.
If you already write CSS, then you can easily learn to preprocess your CSS. Once you understand the scope of Sass, you’ll wonder why you didn’t switch sooner.

Once Sass is installed, you can run

sass input.scss output.css

from your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the --watch flag. An example of running Sass while watching an entire directory is the following:

sass --watch app/sass:public/stylesheets

Sass - Syntactically Awesome Style Sheets

Sass stands for “Syntactically Awesome Style Sheets”. Sass allows us to streamline our CSS coding by giving us an arsenal of methods at our disposal. In some ways, it’s a step into the world of “object oriented” CSS – we can now extend classes previously defined. We can also nest styles, create functions, set variables, do math, and a host of other goodness. It all sounds amazing, doesn’t it? That’s because…it is.

So what’s all the hype about anyway? Why learn a new language/syntax, when we already know CSS? Why should we have to run a bunch of stuff to make Sass work in the first place, and have to readjust our workflow? These are all common questions we come across before taking the plunge. The truth is though, with a tiny little bit of guidance and effort, you could set yourself up to work fast, boot up projects quickly, and code CSS like a beast. Once you get your workflow in check, and couple that with the fact that Sass already speeds things up for you considerably, you’ll be moving lightning quick and won’t be turning back. Let’s dig deeper.

You can watch a youtube video about sass here



HOW IS SASS DIFFERENT TO CSS?

Sass looks similar to CSS but has its obvious differences once you dive in. There are two ways of writing Sass and it’s ultimately up to you which style you prefer. I use the indented and bracketed style (.scss) in my projects because I like to really visualize where a block ends and begins when a lot of code becomes nested. Once processed the Sass code compiles to traditional CSS automatically using a preprocessing engine.
There are many apps available which allow precompiling your Sass to be seamless and downright easy. To install, you can use the command line as long as you have Ruby installed on your machine. If you’re not comfortable with the command line there are other options (more on this below) and if this is over your head visit Sass-lang.com to learn how to do this in an easy step-by-step format. In the end, using any method be it command line or app, the Sass installation will watch your changes and automatically compile down to traditional CSS for you.

Sass & SCSS – What’s The Difference?

Before we get into any examples and learn exactly how Sass works, let’s clarify something that bugs a lot of people. Sass and SCSS are often tossed around interchangeably by people who already know about it. To a newcomer, it can be confusing.

1. Sass (Syntactically Awesome Style Sheets) refers to the preprocessor and syntax as a whole. It takes on its own syntax (the indented syntax), and compiles to readable CSS. We refer to the overall language as Sass.

2. SCSS (Sassy CSS) falls under the Sass umbrella. It is a CSS syntax that’s been turbocharged with all the goodness of Sass. Valid CSS is also valid SCSS, so the transition is swift and painless, and you can learn as much as you want at any time to improve your skills.

When I talk about Sass, I mean the Sass umbrella. I actually code with SCSS, and so do many people. It’s the natural step into the world of Sass, because you can dump all your CSS into an SCSS file and compile it perfectly. So, how exactly does all of this work?

Examples

Variables

We can declare variables in our file that we can reuse throughout our document. This is common for colours and font stacks, and is probably one of the most handy uses of variables off the bat. Here’s the SCSS:

$pad : 2em;
$color-primary : rgb(40,40,40);
$color-secondary : rgb(40,170,220);

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

h1 {
  color: $color-secondary;
}

.container {
  padding: $pad;
}

And here’s the compiled CSS:

body {
  background-color: #282828;
}

h1 {
  color: #28aadc;
}

.container {
  padding: 2em;
}

This is the most fundamental approach to using variables, and it’s ridiculously useful in CSS. You can also do math with variables, and there are a host of other functions to get going with. I’ll leave it up to you to research more when you’re ready.

NESTING

We can nest CSS selectors. This is both beautiful and dangerous, because it’s easy to get carried away with nesting, and end up with very long declarations. Learn it and master it. Nesting can become your best friend, but can also add load to your stylesheet. Let’s look at a classic example – a basic navigation list. Here’s our SCSS:

nav {
  text-align: center;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 5px 10px;
  }
}

And this it what it looks like when compiled:

nav {
  text-align: center;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 5px 10px;
}

Extend

We can extend styles from other declarations. This is particularly useful when dealing with CSS grids, and you want to name your styles mathematically in your stylesheet, but keep it all good and semantic in your markup. Let’s look an example. Here’s our SCSS:

// columns
.col-1-3 {
  width: 33.33%;
}
.col-2-3 {
  width: 66.66%;
}

// colours
.blue {
  color: rgb(40,170,220);
}

// structure
.primary-content {
  @extend .col-2-3;
}
.secondary-content {
  @extend .col-2-3;
}

// text
p.highlight {
  font-size: 3em;
  @extend .blue;
}

And here’s the compiled CSS:

.col-1-3, .secondary-content {
 width: 33.33%;
}

.col-2-3, .primary-content {
 width: 66.66%;
}

.blue, p.highlight {
 color: #28aadc;
}

p.highlight {
 font-size: 3em;
}

Import

We can split our CSS into smaller, more maintainable files, and import them into a master stylesheet. We can underscore these files to let Sass know not to compile them into CSS files. Rather, just drop the code into our master file. For example, if we had 3 separate stylesheets for a reset, grid work, and text styles, we would have _reset.scss, _grid.scss, and _text.scss, and our main style.scss would look like this:

@import 'reset';
@import 'grid';
@import 'text';

body {
}

h1 {
}

Mixins

Mixins are one of the true beauties of Sass. Sounds more like a function to me.They allow us to create our own functions and pass in variables. This is particularly useful for properties that need vendor prefixing. I’ll snag the example from the Sass website, because it echoes the usage perfectly. Here’s some SCSS:

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

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

And here’s our perfectly compiled CSS:

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

SUMMARY

While Sass has a learning curve, I truly believe that once you understand the methods and syntax, you’ll never want to go back to writing standard CSS again.
Sass is extremely powerful and I have only covered the basics here. With traditional CSS, we’ve all encountered the copy and pasting or find and replacing tasks which waste so much time in the development stage of your project. Give Sass a try and discover how to build an effective workflow in your future projects.

I recommend digging into the Sass reference to learn more. There’s a lot of cool stuff to be done, and the learning curve is entirely up to you. Remember, valid CSS is also perfectly valid SCSS, so you’re ready to start right this second. After you wrap your head around it all a bit, I highly recommend looking into a CSS authoring framework like Compass. These frameworks come chock full of mixins and configuration set ups to streamline your workflow even further.
 
Do you use Sass, or favor a different CSS preprocessor? Do you have a favorite mixin? Let us know in the comments.

Sass is a very good way to make css programmable, and very easy to learn, will go deeper into it someday..

But pls can u write something about the difference between sass and less?

Sass is a very good way to make css programmable, and very easy to learn, will go deeper into it someday..

But pls can u write something about the difference between sass and less?

Thanks for the reply, i will gather some resources to write on the topic

I will also implore you to register as this will give you the ability to create a topic you feel