IT:AD:SASS:Concepts:Syntax

(UP)

Summary

File Extensions

Used to be *.sass. Used intentation, etc. Depracated.
Now, use *.scss

Variables

Variables are: * prefixed with $:

Example:

$myBackground: #F0F0FF;

Functions

They can be directly referenced, or used within SASS specific Functions * Ref

Example:

darken ($myBackground,20%);

Nesting

SASS saves a lot of time by allowing nesting. Instead of the more tedious:

table.MyExample { ... }
table.MyExample tr { ... }
table.MyExample tr td { ... }

One can nest the elements more succinctly:

table.MyExample {
   ...
   tr {
      ...
      td { ... }
   }
}

Inheritence

Instead of the following:

.info {...}
.info .warning {...}

One can use the @extends keyword to do:

.info {...}
.warning { @extends .info; ... }

Mixins

Mixins are the hip concept of SASS, allowing reuse.

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th { padding: 2px; }
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

Then include them:

#data {
 @include left(10px);
 @include table-base;
}

Imports

@import allow the including of other files.

It extends the class CSS command, therefore can be used to include other css files,
but also or other *.scss files (otherwise known as partials).

By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

If the file’s extension is .css. If the filename begins with http://. If the filename is a url(). If the @import has any media queries.

If you have a file called “_mylib.scss”, (the underscore stops it from becoming translated first into a “.css”) you can import that file, with all its variables, and mixins.

@import "mylib"
//same as 
@import "mylib.scss"