An Overview Of SASS And SCSS

CSS is great in itself to design webpages. It involves a lot of recurring tasks and it’s difficult to manage the style sheets when the application is very huge. To avoid these recurring tasks and to write CSS in a better way, we need a preprocessor.

Preprocessors are CSS extensions. Preprocessors have all the features of CSS with additional features like variable, expression, mixin etc. A preprocessor will not do anything great in an end user's perspective but it can make development faster and easier. In the end user's perspective for performance, it can concatenate(import) all the style sheets to a single file so that all the styles for an application will be loaded in one network round-trip instead of separate requests for each style sheet.

Styles written using any preprocessor has to be converted to CSS and the compiled CSS file has to be included in the HTML page because the Browser understands CSS.

We have popular Preprocessors like LESS, SASS, Stylus. We are going to discuss Sass.

What is SASS

SASS is the acronym for Syntactically awesome style sheets. SASS was a part of another preprocessor called HAML. HAML was written by Ruby developers. Hence, SASS followed Ruby-like syntax & Ruby needs to be installed on your machine to compile SASS/SCSS files. In its third version, it got CSS like syntax and is referred as Sassy CSS or SCSS. Hence, this article is going to explain about preprocessors in general and SCSS.

Advantages

• It makes your Application easy to maintain by avoiding all recurring tasks. Usage of additional features like variable, expression, nesting, inheritance, mixins, partials makes it more comfortable than CSS.
  
  
• SASS provides many useful functions to manipulate colors and other values.
  
  
• SASS provides advanced features like control directives for the libraries.
  
  
• SASS allows to format and customize the compiled CSS file.

Pre-requisites

To use SASS, we need to install Ruby first. It’s a single click process. Make sure to check “Add Ruby executable to your PATH” option during installation. It makes Ruby available globally. However nowadays there are many editors including Visual studio 2013 Update 2 & advance that provides built-in support for SASS. Hence, if you can’t install Ruby also, there are other alternatives.

Gem will be installed with Ruby. Open command prompt with Ruby & install SASS with Gem by following command.

gem install sass

If any error occurs,

sudo gem install sass

For converting SCSS files to CSS file,

sass <sourcesassfilenamewithpath>.scss : <destinationcssfilenamewithpath>.css
sass sassfiles /style.scss : stylesheets/style.css

SASS vs SCSS

• SCSS is the third version of SASS. They are just syntactically different from each other.
  
  
• SASS
  
  ○ SASS code is compact, it needs fewer key strokes. We don’t need braces, semicolons.
  ○ Indentation plays a major role. Hence, it forces coding standard.
  
  
• SCSS(Sassy CSS)
  
  ○ More expressive
  ○ More readable
  ○ Easy to learn
  ○ Integration with css is easy. You can directly use the css code from Plugin. Css to SASS conversion tools are not 100% correct.

SASS - SCSS conversion

SASS files can be converted to SCSS and vice versa.

• Convert SASS to SCSS
  
  $ sass-convert style.sass style.scss
  
  
• Convert SCSS to Sass
  
  $ sass-convert style.scss style.sass

SASS Script - Interactive shell

To launch the interactive shell, execute following command in command prompt opened with Ruby,

sass -i
>> 1px + 10px
11px
>> #777 + #777
#eeeeee
>> 10px/5px
2

SASS With Grunt

Grunt is a JavaScript runner that reduces our recurring task for deployment like concatenation or bundling, minifying css or js files etc.

Follow the steps to work with Grunt & SASS

• Install NodeJS to get npm (Node Package Manager). Download NodeJS and install it.
  
  
• Install grunt.
  
  If project and package.json file already exists, go to project root directory and execute the following command.
  
  npm install → It will install all the devDpendencies mentioned in package.json.
  
  If project is created from scratch or does not have package.json file already.
  
  npm init → It will ask some questions and create package.json as per your responses.
  
  npm install grunt --save-dev → It will install grunt and add the same in devDependencies section of package.json file.
  
  npm install grunt-contrib-sass --save-dev → It will install grunt-contrib-sass.
  
  npm install grunt-contrib-watch --save-dev (optional)
  
  
• Create Gruntfile.js in project root directory where we need to define tasks for Grunt task runner.
  
  Paste following in Gruntfile.js.
  
  1. module.exports = function(grunt) {
  2. grunt.initConfig({
  3. pkg: grunt.file.readJSON('package.json'),
  4. sass: {
  5. dist: {
  6. files: {
  7. // destination file : source file
  8. 'style/style.css' : 'sass/style.scss'
  9. }
  10. }
  11. }
  12. });
  13. grunt.loadNpmTasks('grunt-contrib-sass');
  14. grunt.registerTask('default',['sass']); // Register default grunt task
  15. }
  Now in cmd, you can go to your project root directory and execute the following Grunt SASS,
  
  Or
  
  grunt
  
  It will compile the SCSS file and create css file for you.

Sass features

Variable ($)

Mostly used values can be kept in the variables. Let’s say, you want to give a particular color to some elements along with some other styles in your page. Say in the future, you want to change this color. If you are using css, you need to change this color value for all the elements separately. If you are keeping this color value in some variable and using it, you just need to change this variable value.

Expression

SCSS allows to use arithmetic operators (+, -, *, /, %) for the expression, to provide calculated value for styles.

1. SCSS doesn’t evaluate plain css. E.x. font: 15px/12px won’t evaluate as it indicates line height font color.
   
   
2. Use a variable or parenthesis for expressions.
   
   1. Width: 100px/2 // This won’t evaluate, but followings will evaluate
   2. $width: 100px; width: $width/2;
   3. Width: (100px/2)
3. Parenthesis for list values doesn’t evaluate.
   
   1. font:(italic bold 10px/8px) // Won’t evaluate
4. Use function, + for expression.
   
   1. margin-left: 5px + 8px/2px; // This will evaluate