SASS INTRODUCTION

Irfan Maulana | Front End Developer

About Me

• Name : Irfan Maulana• Position : Software Development Engineer• Role : Front End Developer

About CSS Pre-Processor

• Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets.

Why We Need CSS Pre-Processor

• CSS is primitive and incomplete.

• Building a function, reusing a definition or inheritance are hard to achieve.

• For bigger projects, or complex systems, maintenance is a very big problem. 

Getting to know SASS

• Sass is one of CSS Pre-processor vendor, other popular vendor is LESS and Stylus.

• Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. source : http://sass-lang.com/

• Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

SASS Goodness

CSS COMPATIBLESass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries.

FEATURE RICHSass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead.

MATURESass has been actively supported for over 9 years by its loving Core Team

INDUSTRY APPROVEDOver and over again, the industry is choosing Sass as the premier CSS extension language.

LARGE COMMUNITYSass is actively supported and developed by a consortium of several tech companies and hundreds of developers.

FRAMEWORKSThere are endless number of frameworks built with Sass. Compass, Bourbon, and Susy just to name a few.

SASS Instalation

WITH RUBY

Download Ruby : http://rubyinstaller.org/ type : gem install sasshttp://sass-lang.com/install

Or

WITH NODEJS

Download nodejs https://nodejs.org/en/download/type : npm install node-sassor you can use built in plugin from build tool like grunt, gulp

SASS Syntax

SASS have two different syntax, called SASS and SCSS syntax.

SASS syntax is the original one that influence by HAML, SASS syntax is very different with native CSS in case of tab sensitive as their approach.

SCSS is the rescue for CSS Developer that want to migrate to SASS Way.SCSS has very same syntax with native CSS, so we will use this syntax in our session here.

http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

Lets Deep Dive The SASS Wayhttp://sass-lang.com/guide

Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.

Here's an example:

Output:

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

Here's an example:

Nesting – continues…

Outpout:

Nesting – continues…

We can add prefix of parent with &Here an example :

Output :

Partial and Import

SASS support partial file that will merge to one file.For partial file you can add _ (underscore) in front of file. Ex : _reset.scss

And for using that partial file you can use @import Example :

@import “reset”;

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

Here an example :

Extends/Inheritance

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. 

Here an example :

Extends/Inheritance – continues

Output :

Extends/Inheritance – continues

We can use placeholder selector that will not produce class to be extended.

Here an example :

Output :

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.

Here an example :

Operators – continues

Output :

Expressions – @if @else

Example :

Output :

Expressions – @for

Example :

Output :

Expressions – @each

Example :

Output :

Expressions – @while

Example :

Output :

See the code

https://github.com/mazipan/awesome-bemcss

Contact Me

• Facebook : /mazipanneh• Twitter : @mazipan• Linkedin : /in/irfanmaulanamazipan• Slideshare : /IrfanMaulana21• Github : mazipan• Email : mazipanneh@gmail.com• Blog : mazipanneh , mazipan.github.io

Reference

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

THANK YOU