1
2
3
4
5
6
7
8
9

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

1
2
3
4
5
6

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

1
2
3
4
5
6
7

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

1
2
3
4
5

// This is a single line supported by SCSS

/*
This is a classical multiline comment support by both CSS and SCSS
*/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$height: 5px;

$font: "Microsoft YaHei";
$font-without-quotation-mark: Microsoft YaHei;

$color1: #ffffff;
$color2: rgba(255, 255, 255,0 );

// use space or comma to seperate elements
$some-list: 1px 2px 3px 4px

1
2
3
4
5
6
7
8

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}