SCSS - Quick Guide

Hi, If you know CSS and want a quick move to SCSS, you can refer this article.

To install Scss Environment / Compass http://compass-style.org/install/

What is Sass / Scss?

• An extension of CSS
• Modular and Easily Maintainable
• Feature Rich
• Frameworks (Compass, Bourbon, Susy)

These are the majorly used SCSS Properties.
1. Variables
2. Nesting
3. Mixins
4. Parent Selector
5. Inheritance / extend
6. The Optional Flag
7. Placeholder Selector
8. CSS Namespace
9. Variable Defaults
10. Partials
11. Sass Inbuilt Functions
12. Control Directives

1. Variable : Variables are the straightforward way to use SassScript. They are used as css Properties.

SCSS

$themeErrorColor: red;
.error{
 color: $themeColor;
 border: 1px solid $themeErrorColor;
 background: lighten($themeErrorColor, 20%);
}

CSS

.error{
 color: red;
 border: 1px solid red;
 background: lightred;
}    

2. Nesting : In Css coding, When targeting a child element, many words and lines are repeated like

SCSS

ul{
 color: red;
 ul li{
  width: 200px;
  ul li a{
   padding: 3px;
  }
 }
}

CSS

ul{
 color: red;
}
ul li{
 width: 200px;
}
ul li a{
 padding: 3px;
}

3. Mixins : Even more useful than variables, mixns allow us to reuse whole chunk of css properties or selectors. You can even give them arguments.

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); }

CSS

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

4. Parent Selector : Parent Selector, a powerful scss tool, refers to the parent selector using & (ampersand).

SCSS

a{
  color: grey;
  &:hover{        // Parent Selector
   color: blue;
  }
 }
}

CSS

a{
 color: grey;
}
a: hover{
 color: blue;
}

Another Example:

SCSS

.inputBox{
 border: 1px solid grey;
 &.error{
  border: 1px solid red;
 }
}

CSS

.inputBox{
 border: 1px solid grey;
}
.inputBox.error{
 border: 1px solid red;
}

5. Inheritance / Extend : Sass can tell one selector to inherit all the styles of another without duplicating css properties.

SCSS

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

CSS

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

6. The Optional Flag: Normally when you extend a selector, its an error if that @extend does not work. Sometimes though you want to allow an @extend the selector optionally.

SCSS

a.important{
 @extend .notice!optional;
}

7. Placeholder Selector / @extend-only Selector: Sometimes, you will write styles for a class that you only ever want to extend, and never want to use directly in your html.

Placeholder Selector look like class and id selector except the # or . is replaced by %.

This ruleset does not rendered on its own.

For Example: Suppose we have three buttons in our application, 1. default, 2. primary button, 3. secondary button and we have classes btn, default, primary and secondary. btn class here is a placeholder selector with no individual significance, it can be used with default, primary and secondary buttons.

SCSS

%btn{     // this block will not render
 padding: 4px 6px;
 border-radius: 2px;
 font-size: 12px;
}
.defaultBtn{
 @extend %btn;
 background: white;
 color: #000000;
}
.primaryBtn{
 @extend %btn;
 background: blue;
 color: #ffffff;
}
.secondaryBtn{
 @extend %btn;
 background: grey;
 color: #000000;
}

CSS

.btn{
 padding: 4px 6px;
 border-radius: 2px;
 font-size: 12px;
}
.btn.defaultBtn{
 background: white;
 color: #000000;
}
.btn.primaryBtn{
 background: blue;
 color: #ffffff;
}
.btn.secondaryBtn{
 background: grey;
 color: #000000;
}

8. CSS Namespace : Css has quite a few properties that are in "namespace"; for instance: font-family, font-size, font-weight are all in same font namespace. In Css, you have to type each property seperately while in Scss, you have to type it one time.

SCSS

body{
 backgrond:{
  image: url(http://placehold.it/20x20);
  color: red;
  position: 100px 20px;
 }
}

CSS

body{
 backgrond-image: url(http://placehold.it/20x20);
 background-color: red;
 background-position: 100px 20px;
}

9. Variable Defaults : A very simple SCSS ruleset to define default value of a variable i.e if some variable has not assigned any value, it will take its default value using !default.

SCSS

$themeColor = red!default;

10. Partials :  If you have a SCSS or SASS file that you want to import but don't want to compile to a CSS file, you can add an underscore to the beginning of file name. This will tell Sass not to compile to a CSS file. You can import these files without using underscores using import keyword.

For Instance you might have _reset.scss then no _reset.css file would be created.

@import "colors"; // will import _colors.scss

11. Sass Inbuilt Functions : Sass Provide a good number of builtin functions for Colors, Opacity, String Functions, Number Function, List Function, Map Function. Apart from these functions, you can create your custom function also.
You can get detailed information here:

http://sass-lang.com/documentation/Sass/Script/Functions.html

12. Control Directives : Control Directives avails loop functions like @if, @for, @each and @while etc. For Example:

SCSS
@if Directive

p{
 @if 1 + 1 = 2 {
  border: 1px solid;
 } elseif 5 < 3 {
  border: 1px dotted;
 } else {
  border: 1px double;
 }
}

@for Directive

@for $var from 1 through 3{    // @for $var from  through 
  .item-#{$i} { width: 20px * $i; }    // # to concadinate
}

@each Directive

@each $animal in puma, sea-slug {
 .#{$animal}-icon{
  background-image: url('/img/#{$animal}.png');
 }
}

is compiled to

.puma-icon{
 background-image: url('/img/puma.png');
}
.sea-slug{
 background-image: url('/img/sea-slug.png');
}

@while Directive

$i : 6;
@while $i > 0 {
 .item-#{$i} { width: 2em * $i;}
 $i : $i - 2;
}

is compiled to

.item-6{
 width: 12em;
}
.item-4{
 width: 8em;
}
.item-2{
 width: 4em;
}

You can start with these SCSS rules to switch from CSS to SCSS.
Enjoy Sassy CSS.


Reference:
http://sass-lang.com/
http://thesassway.com/