Article

Bhavin Tanti
Bhavin Tanti 29 August 2018

SASS – CSS with superpowers

SASS has come as a blessing for the web designers and has revolutionized the field of web designing. Get a sneak peek of the basics of this CSS with superpowers here.

What is SASS?

SASS is an extension to CSS. It is an acronym for “Syntactically Awesome Stylesheets”, a CSS pre-processor that adds logic to the styling document before it passes through a software which turns it into plain, regular CSS which the browsers can understand.

Why use SASS?

  • SASS is fully CSS-compatible pre-processing language that uses its own syntax for CSS.
  • It is more powerful, elegant and stable than CSS.
  • It is an open-source pre-processor that is easy, clean and short in programming construct.
  • It supports features that aids in creating awesome stylesheets and writing code more efficiently.
  • It also facilitates language extensions, logic statements and other useful built-in functions for manipulating colors and other values.
  • It keeps your responsive project more organized.
  • It eliminates the need to repeat the similar CSS again and again in your project.
  • It provides many advanced features along with the regular CSS features.

How to install SASS?

You can install SASS using many third-party applications or command line. Here, we will discuss only the easiest way to install SASS – by installing Ruby.

Go to the link https://www.ruby-lang.org/en/downloads/ and download the stable version of Ruby. Follow all the steps and complete its installation. Once the installation is completed go to the start menu and run command prompt with Ruby.

Then, enter the following line: gem install sass

This will successfully complete the installation of SASS.

Features of SASS

Preprocessing

CSS is fun to write but when the stylesheets become larger and more complex, it becomes difficult to maintain them. This is where the pre-processor can help. As mentioned above SASS is an extension to CSS and provides some advanced features like variables, nesting, mixins, operators, inheritance and many more that do not exist in the CSS yet. Once you start working on the SASS file, it will take the pre-processed SASS file as a regular CSS file which can be used later on the website.

This can be done directly in your terminal. Once the installation is completed, you can compile your SASS to CSS using sass command. You will have to tell SASS from which file to build to and where to output the CSS as shown in the example below:

1

sass input. scss  ouput.css

This means that SASS will take a single input.scss SASS file and will compile it to ouput.css file.

You can watch individual files and folders using the –watch flag. The watch flag as it name suggests tells SASS to keep a watch on the files and folders for changes and re-compile CSS each time you make changes and save your SASS file. For example,

1

sass --watch input.scss output.css

In the above example, SASS will keep a watch on input.scss file for changes and will recompile output.css every time you save the input file.

You can do this for entire folder too. For example,

1

sass --watch app/sass:public/stylesheets

In the above example, SASS will keep a watch on all the files in the app/sass folder and compile CSS to public/stylesheets folder.

You can also check the version of SASS by running:

1

sass -v

Reuse values with variables

SASS facilitates the feature of variables. You can think of a variable as a box for or a way of storing values which you will want to reuse. SASS uses $ sign to make anything variable.

1
2
3
4

$base-color: #f2f2f2;
body {
  background: $base-color;
}

When the SASS is processed, it takes the values for the variables defined above and outputs normal CSS with the variable values placed in the CSS as shown below. This can be helpful to maintain the consistency of the brand colors throughout the website.

1
2
3

body {
  background: #f2f2f2;
}

Doing math with operators

SASS supports a handful of standard math operators like +,-,*,/ and % to do math in your CSS. Here’s an example:

1
2
3
4
5

$padding: 1em;

header {
  padding: $padding $padding*2;
}

When the SASS will process, it will carry out this simple math and the generated CSS will look like this:

1
2
3

header {
  padding: 1em 2em;
}

Nesting

SASS lets you nest the CSS selectors in a way that follows the same visual hierarchy of your HTML. But keep in mind that overly nested rules will result in over-qualified CSS that may be hard to maintain.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$link-color: #0f00ff;
$font-size: 16px;

nav {
  ul {
    margin:0;
    padding: 0;
    li {
      list-style:none;
      a {
        font-size: $font-size;
        color: $link-color;
      }
    }
  }
}

Here, ul, li and a are the selectors nested under the nav selector. The generated CSS will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  font-size: 16px;
  color: #0f00ff;
}

This is a great way of organizing your CSS and make it easily readable.

Manage large stylesheets with SASS partials

SASS partials allow you to split your stylesheet into small manageable snippets of CSS which you can include in other SASS files. A SASS partial file should include as underscore (_) at the beginning. This indicates the SASS that it is just a partial SASS file and should not be generated into a CSS file.

You can import these partial files using @import. It works same as @import in CSS. The only difference is that in CSS, whenever you use @import it creates an another HTTP request. While in SASS, whenever you use @import, it combines the file you are importing with the file you are importing into and serves a single CSS file to the web browser, thereby reducing the number of HTTP requests. Take a look at the example below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/sass
|-- main.scss
|
|-- /base
|   |-- variables.scss
|   +-- mixins.scss
|
|-- /components
|   |-- buttons.scss
|
|-- /layout
|   |-- header.scss
|   |-- footer.scss
|   +-- navbar.scss

1
2
3
4
5
6
7
8

@import "base/_variables"
@import "base/_mixins"

@import "components/_buttons"

@import "layout/_header"
@import "layout/_footer"
@import "layout/_navbar"

You can create as many partial files as you want. And keep in mind that the order of the files imported matters. The file with the variables should be imported ahead of the file where those variables are used.

Repeat common code blocks with Mixins

There are times when you have to write same code blocks with some minor changes. To avoid writing such common code blocks, SASS supports mixins. Mixin allows you to reuse the common code blocks while still allowing you to have customized values inside the block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@mixin transition($value) {
  -moz-transition: $value;
   -ms-transition: $value;
       transition: $value;
}

@mixin button($background, $text) { 
  display: inline-block; 
  padding: 0.5em 1em; 
  background: $background; 
  color: $text;
}

form button,
form input[type="submit"],
form input[type="button"] {
  @include button(blue, white);
  @include transition(all ease .2s);
}

The generated CSS will look like this:

1
2
3
4
5
6
7
8
9
10
11

form button,
form input[type="submit"],
form input[type="button"] {
  display: inline-block; 
  padding: 0.5em 1em; 
  background: blue; 
  color: white;
  -moz-transition: all ease .2s;
   -ms-transition: all ease .2s;
       transition: all ease .2s;
}

Extend / Inheritence

Using @extend in SASS allows you to share a set of properties from one selector to another. It is one of the most useful features of SASS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

border: 1px solid #ccc
  padding: 10px
  color: #333
.message
  @extend %message-shared
.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

.warning
  @extend %message-shared
  border-color: yellow

The above code tells .message, .success, .error and .warning to behave like %message-shared. Each of these class will also get the same CSS properties as %message-shared.

The generated CSS will look like this:

1
2
3
4
5
6
7
8
9
10

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;}
.success {
  border-color: green;}
.error {
  border-color: red;}
.warning {
  border-color: yellow;}

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
7 reasons why social media marketing is important for your business

7 reasons why social media marketing is important for your business

Social media is quickly becoming one of the most important aspects of digital marketing, which provides incredible benefits that help reach millions of customers worldwide. And if you are not applying this profitable...

Sharron Nelson
Sharron Nelson 6 February 2018
Read more
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
Top 10 B2B Platforms to Help your Business Grow Worldwide

Top 10 B2B Platforms to Help your Business Grow Worldwide

Although the trend of a Business to Business portal is not new but the evolution of technology has indeed changed the way they function. Additional digital trading features and branding has taken the place of...

Salman Sharif
Salman Sharif 7 July 2017
Read more
What Marketing Content Do Different Age Groups like to Consume?

What Marketing Content Do Different Age Groups like to Consume?

Today marketers have a wide choice of different content types to create; from video to blogs, from memes to whitepapers. But which types of content are most suitable for different age groups?

Lisa Curry
Lisa Curry 21 October 2016
Read more
Collection Of The Best Email Testing Tools Online

Collection Of The Best Email Testing Tools Online

Don’t be afraid of email testing. There are many free or freemium tools online that can help you with testing your SPAM score, deliverability and even the rendering of your email. We feature 30 email testing tools in...

Roland Pokornyik
Roland Pokornyik 31 October 2016
Read more