New syntax for css - Scss Sass

Sass

Installation

1
gem install sass

Usage

1
2
3
4
5
6
# Compile scss to css
sass input.scss output.css

sass --watch input.scss output.css

sass --watch src/sass:dist/css

Syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// variable
$font-stack: Helvetica, sans-serif;
$font-color: #000;

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


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

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

Reference

http://sass-lang.com/guide