MENU


SASS

Like Less, Sass is an extension of CSS. Although you can test it out in your browser, a Sass file usually needs to be pre-processed by a Sass compiler such as Koala to obtain the corresponding CSS file suitable for use by the browsers.
Sass Preprocessor Koala You can also run the command-line version of the Sass pre-processor by first installing Ruby.

Sass is also supported by many online editors such as CodePen, JSBin, CSS Deck, Fiddle Salad etc.


There are two syntactical forms of Sass:
1. Sassy CSS (.scss) is closer to conventional CSS. Every valid CSS is also valid SCSS. This will be used throughout the tutorial here.
.myTable {
   &, td { border: 1px solid black; }
   tr:first-child { background: orange; }
}
2. Indented Syntax CSS (.sass) is an older syntax. A more concise way of writing CSS, it uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties.
#main
  color: blue
  font-size: 0.3em

  a
    font:
      weight: bold
      family: serif
    &:hover
      background-color: #eee


There are four output styles for Sass-generated CSS:
1. nested:
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }
2. expanded:
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}
3. compact:
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
4. compressed:
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}