SCSS mode

​x
 
1
/* Some example SCSS */
2
​
3
@import "compass/css3";
4
$variable: #333;
5
​
6
$blue: #3bbfce;
7
$margin: 16px;
8
​
9
.content-navigation {
10
  #nested {
11
    background-color: black;
12
  }
13
  border-color: $blue;
14
  color:
15
    darken($blue, 9%);
16
}
17
​
18
.border {
19
  padding: $margin / 2;
20
  margin: $margin / 2;
21
  border-color: $blue;
22
}
23
​
24
@mixin table-base {
25
  th {
26
    text-align: center;
27
    font-weight: bold;
28
  }
29
  td, th {padding: 2px}
30
}
31
​
32
table.hl {
33
  margin: 2em 0;
34
  td.ln {
35
    text-align: right;
36
  }
37
}
38
​
39
li {
40
  font: {
41
    family: serif;
42
    weight: bold;
43
    size: 1.2em;
44
  }
45
}
46
​
47
@mixin left($dist) {
48
  float: left;
49
  margin-left: $dist;
50
}
51
​
52
#data {
53
  @include left(10px);
54
  @include table-base;
55
}
56
​
57
.source {
58
  @include flow-into(target);
59
  border: 10px solid green;
60
  margin: 20px;
61
  width: 200px; }
62
​
63
.new-container {
64
  @include flow-from(target);
65
  border: 10px solid red;
66
  margin: 20px;
67
  width: 200px; }
68
​
69
body {
70
  margin: 0;
71
  padding: 3em 6em;
72
  font-family: tahoma, arial, sans-serif;
73
  color: #000;
74
}
75
​
76
@mixin yellow() {
77
  background: yellow;
78
}
79
​
80
.big {
81
  font-size: 14px;
82
}
83
​
84
.nested {
85
  @include border-radius(3px);
86
  @extend .big;
87
  p {
88
    background: whitesmoke;
89
    a {
90
      color: red;
91
    }
92
  }
93
}
94
​
95
#navigation a {
96
  font-weight: bold;
97
  text-decoration: none !important;
98
}
99
​
100
h1 {
101
  font-size: 2.5em;
102
}
103
​
104
h2 {
105
  font-size: 1.7em;
106
}
107
​
108
h1:before, h2:before {
109
  content: "::";
110
}
111
​
112
code {
113
  font-family: courier, monospace;
114
  font-size: 80%;
115
  color: #418A8A;
116
}
117
​

The SCSS mode is a sub-mode of the CSS mode (defined in css.js).

Parsing/Highlighting Tests: normal, verbose.