Technical Solution

Basics of SASS

Antony.glen | | 4 min read

SASS is called Syntactically Awesome Style-sheets. SASS is said as an extension or scripting language that is interpreted to the CSS. SASS was developed by Hampton Catlin and Nathan Weizenbaum with the aim to maintain complicated style-sheets. As said before with SASS we will be amazing features to build better style-sheets for making life easy.

Most outstanding features of SASS with CSS are:

  • Preprocessing
  • Variables
  • Nesting
  • Partials
  • Import
  • Mixins
  • Extend/Inheritance
  • Operators

We will be getting back to these features later. In this article we will be dealing with the foundations we should be learning about SASS. Since SASS is an external feature, lets begin with the installation procedures first.

There are a number of ways to install SASS in our local system. Here I will demonstrate it using the ruby gems. Make sure you have ruby installed to use gem commands. For installation open the terminal window and type in the following command,

gem install sass

This will make the sass installed, for checking the sass working try command 'sass -v'

CSS on its own are often fun, however style-sheets have gotten larger, additional complicated, and tougher to keep up. This often is wherever a preprocessor can facilitate. Sass enables you to use options that do not exist in CSS nonetheless like variables, nesting, mixins, inheritance and different neat goodies that create writing CSS fun once more.

Once you begin tinkering with Sass, it'll take your preprocessed Sass file and reserve it out as a standard CSS file that you just will use in your computing machine.

For making things simple, let's take one basic syntax of sass,


  $font-stack: Helvetica, sans-serif
  $primary-color: #333

  body
    font: 100% $font-stack
    color: $primary-color

Think of variables as some way to store info that you simply need to utilize throughout your style-sheet. You'll be able to store things like colors, font stacks, or any CSS price you think that you'll be wanting to utilize. Sass uses the $ symbol to create one string a variable.

When the Sass is processed, it takes the variables we have a tendency to outline for the $font-stack and $primary-color and outputs traditional CSS with our variable values placed within the CSS. This will be very powerful once operating with complete colors and keeping them consistent throughout the location.


  body {
    font: 100% Helvetica, sans-serif;
    color: #333;
  }

Another feature of SASS is nesting. Sass can allow you to nest your CSS selectors in a very manner that follows an identical visual hierarchy of your markup language. Remember that excessively nested rules can end in over-qualified CSS that might prove exhausting to keep up and is usually thought of non valid follow.


  nav
  ul
    top: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    margin: 6px 12px

After processing, it may result in following structure,


nav ul {
  top: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  margin: 6px 12px;
}

We will be discussing about processing the sass files after explain its features.

A partial is just a Sass file named with a leading underscore. You may name it one thing like _partial.scss. The underscore lets Sass apprehend that the file is barely a partial file which it shouldn't be generated into a CSS file. Sass partials area unit used with the @import directive.

CSS has an import choice that permits you to split your CSS into smaller, additional repairable parts. The sole disadvantage is that every time you employ @import in CSS it creates another HTTP protocol request. Sass builds on prime of the present CSS @import however rather than requiring additional HTTP protocol request, Sass can take the file that you just need to import and mix it with the file you are importation into thus you'll be able to serve one CSS file to the net browser.

For example:


// _common.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0



// main.sass

@import common

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

After sass is processed you will get a single css file like below:


html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

A mixin helps you to build a number of CSS declarations that you simply wish to use throughout your website. To make a mixin you add the @mixin directive and provides it a name. Extend/Inheritance is one another most useful feature in SASS. With @extend helps you to share a collection of CSS properties from one selector to a different.

Sass is an associate degree extension of CSS that adds power and magnificence to the fundamental language. It permits you to use variables, nested rules, mixins, inline imports and more, all with a totally CSS-compatible syntax. Sass helps keep massive stylesheets well-organized, and acquire little stylesheets up and compiling quickly with the assistance of the Compass vogue library.

Now lets see how to process the sass files that we have created so far.

To process sass via command line:


sass <filename.sass> <output.css>

Sass allow a feature to add files to watch list, which enables to update css whenever the sass file changes.


sass --watch <filename.sass> <output.css>

There is a lot more features using sass such as caching properties, control statements or expressions etc. For reference please check, http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Feel free to write your feedback, comments or questions.

 

 

Related Topics