SASS Basics

  1. Variables in SASS
$font-stack:    Helvetica, sans-serif;
$primary-color: #888;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Output:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. Partials
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

For example: _header.scss, _footer.scss

4. Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.

Let’s say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.

// base.scss

@import 'reset';

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

Note: When you import a file you don’t need to include the file extension .scss. Sass is smart and will figure it out for you.

5. 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’s an example for border-radius.

SCSS Syntax:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

6. Extend/Inheritance
Using extend you can inherit properties. This is most useful feature of the SASS.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
} .error{ @extend .message; border-color: red; }

7. Operators:

SASS also supports arithmatic operators like ‘+’, ‘-‘, ‘/’, ‘%’, ‘*’.
$full-width: 100%;
$col-50: $full-width – 50;
Assignment: Create simple grid layout using operators.

8. SASS List

$colors: "red" "green" "blue" "orange";
$colors-with-comma: "red","green","blue","orange";
ul {
    @each $color in $colors {
        li {
            &:nth-child(#{index($colors, $color)}) {
                a {
                    color: #{$color};
                }
            }
        }
    }
}

9. SASS For loop

$cars: Tata BMW Tavera Swift;

@for $i from 1 through length($cars){
.cars-#{$i}{
    &:after{
      content: "#{$i}. #{nth($cars, $i)}";
     }
   }
}

Output:

.cars-1:after {
content: “1. Tata”; }

.cars-2:after {
content: “2. BMW”; }

.cars-3:after {
content: “3. Tavera”; }

.cars-4:after {
content: “4. Swift”; }

Advertisements