1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
# Intro to SCSS for Sass Users
Sass 3 introduces a new syntax known as SCSS
which is fully compatible with the syntax of CSS,
while still supporting the full power of Sass.
This means that every valid CSS stylesheet
is a valid SCSS file with the same meaning.
In addition, SCSS understands most CSS hacks
and vendor-specific syntax, such as [IE's old `filter` syntax](http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx#Defining_Visual_Filt).
Since SCSS is a CSS extension,
everything that works in CSS works in SCSS.
This means that for a Sass user to understand it,
they need only understand how the Sass extensions work.
Most of these, such as variables, parent references, and directives work the same;
the only difference is that SCSS requires semicolons
and brackets instead of newlines and indentation.
For example, a simple rule in Sass:
#sidebar
width: 30%
background-color: #faa
could be converted to SCSS just by adding brackets and semicolons:
#sidebar {
width: 30%;
background-color: #faa;
}
In addition, SCSS is completely whitespace-insensitive.
That means the above could also be written as:
#sidebar {width: 30%; background-color: #faa}
There are some differences that are slightly more complicated.
These are detailed below.
Note, though, that SCSS uses all the
{file:SASS_CHANGELOG.md#3-0-0-syntax-changes syntax changes in Sass 3},
so make sure you understand those before going forward.
## Nested Selectors
To nest selectors, simply define a new ruleset
inside an existing ruleset:
#sidebar {
a { text-decoration: none; }
}
Of course, white space is insignificant
and the last trailing semicolon is optional
so you can also do it like this:
#sidebar { a { text-decoration: none } }
## Nested Properties
To nest properties,
simply create a new property set
after an existing property's colon:
#footer {
border: {
width: 1px;
color: #ccc;
style: solid;
}
}
This compiles to:
#footer {
border-width: 1px;
border-color: #cccccc;
border-style: solid; }
## Mixins
A mixin is declared with the `@mixin` directive:
@mixin rounded($amount) {
-moz-border-radius: $amount;
-webkit-border-radius: $amount;
border-radius: $amount;
}
A mixin is used with the `@include` directive:
.box {
border: 3px solid #777;
@include rounded(0.5em);
}
This syntax is also available in the indented syntax,
although the old `=` and `+` syntax still works.
This is rather verbose compared to the `=` and `+` characters used in Sass syntax.
This is because the SCSS format is designed for CSS compatibility rather than conciseness,
and creating new syntax when the CSS directive syntax already exists
adds new syntax needlessly and
could create incompatibilities with future versions of CSS.
## Comments
Like Sass, SCSS supports both comments that are preserved in the CSS output
and comments that aren't.
However, SCSS's comments are significantly more flexible.
It supports standard multiline CSS comments with `/* */`,
which are preserved where possible in the output.
These comments can have whatever formatting you like;
Sass will do its best to format them nicely.
SCSS also uses `//` for comments that are thrown away, like Sass.
Unlike Sass, though, `//` comments in SCSS may appear anywhere
and last only until the end of the line.
For example:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
is compiled to:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }
## `@import`
The `@import` directive in SCSS functions just like that in Sass,
except that it takes a quoted string to import.
For example, this Sass:
@import themes/dark
@import font.sass
would be this SCSS:
@import "themes/dark";
@import "font.sass";
|
