Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 211 lines (160 sloc) 5.256 kB
69083c0 @nex3 [Sass] Add a document detailing the indented syntax.
nex3 authored
1 # Sass Indented Syntax
2
3 * Table of contents
4 {:toc}
5
6 Sass's indented syntax (also known simply as "Sass")
7 is designed to provide a more concise
8 and, for some, more aesthetically appealing alternative
9 to the CSS-based SCSS syntax.
10 It's not compatible with CSS;
11 instead of using `{` and `}` to delimit blocks of styles,
12 it uses indentation,
13 and instead of using semicolons to separate statements it uses newlines.
14 This usually leads to substantially less text
15 when saying the same thing.
16
17 Each statement in Sass, such as property declarations and selectors,
18 must be placed on its own line.
19 In addition, everything that would be within `{` and `}` after a statement
20 must be on a new line and indented one level deeper than that statement.
21 For example, this CSS:
22
23 #main {
24 color: blue;
25 font-size: 0.3em;
26 }
27
28 would be this Sass:
29
30 #main
31 color: blue
32 font-size: 0.3em
33
34 Similarly, this SCSS:
35
36 #main {
37 color: blue;
38 font-size: 0.3em;
39
40 a {
41 font: {
42 weight: bold;
43 family: serif;
44 }
45 &:hover {
46 background-color: #eee;
47 }
48 }
49 }
50
51 would be this Sass:
52
53 #main
54 color: blue
55 font-size: 0.3em
56
57 a
58 font:
59 weight: bold
60 family: serif
61 &:hover
62 background-color: #eee
63
64 ## Sass Syntax Differences
65
66 In general, most CSS and SCSS syntax
67 works straightforwardly in Sass
68 by using newlines instead of semicolons
69 and indentation instead of braces.
70 However, there are some cases where there are differences or subtleties,
71 which are detailed below.
72
374041e @nex3 [Sass] Document old-style properties.
nex3 authored
73 ## Property Synax
74
75 The indented syntax supports two ways of declaring CSS properties.
76 The first is just like CSS, except without the semicolon.
77 The second, however, places the colon *before* the property name.
78 For example:
79
80 #main
81 :color blue
82 :font-size 0.3em
83
84 By default, both ways may be used.
85 However, the {file:SASS_REFERENCE.md#property_syntax-option `:property_syntax` option}
86 may be used to specify that only one property syntax is allowed.
87
69083c0 @nex3 [Sass] Add a document detailing the indented syntax.
nex3 authored
88 ### Multiline Selectors
89
90 Normally in the indented syntax, a single selector must take up a single line.
91 There is one exception, however:
92 selectors can contain newlines as long as they only appear after commas.
93 For example:
94
95 .users #userTab,
96 .posts #postTab
97 width: 100px
98 height: 30px
99
100 ### Comments
101
102 Like everything else in the indented syntax,
103 comments are line-based.
104 This means that they don't work the same way as in SCSS.
105 They must take up an entire line,
106 and they also encompass all text nested beneath them.
107
108 Like SCSS, the indented syntax supports two kinds of comments.
109 Comments beginning with `/*` are preserved in the CSS output,
110 although unlike SCSS they don't require a closing `*/`.
111 Comments beginning with `//` are removed entirely.
112 For example:
113
114 /* This comment will appear in the CSS output.
115 This is nested beneath the comment,
116 so it's part of it
117 body
118 color: black
119
120 // This comment will not appear in the CSS output.
121 This is nested beneath the comment as well,
122 so it also won't appear
123 a
124 color: green
125
126 is compiled to:
127
128 /* This comment will appear in the CSS output.
129 * This is nested beneath the comment,
130 * so it's part of it */
131 body {
132 color: black; }
133
134 a {
135 color: green; }
136
137 ### `@import`
138
8d409a8 @nex3 [Sass] [Indented] Allow quotes in indented-syntax @import.
nex3 authored
139 The `@import` directive in Sass does not require quotes, although they may be used.
69083c0 @nex3 [Sass] Add a document detailing the indented syntax.
nex3 authored
140 For example, this SCSS:
141
c0302f4 @nex3 [Sass] Fix a typo in INDENTED_SYNTAX.
nex3 authored
142 @import "themes/dark";
143 @import "font.sass";
69083c0 @nex3 [Sass] Add a document detailing the indented syntax.
nex3 authored
144
145 would be this Sass:
146
147 @import themes/dark
148 @import font.sass
149
150 ### Mixin Directives
151
152 Sass supports shorthands for the `@mixin` and `@include` directives.
153 Instead of writing `@mixin`, you can use the character `=`;
154 instead of writing `@include`, you can use the character `+`.
155 For example:
156
157 =large-text
158 font:
159 family: Arial
160 size: 20px
161 weight: bold
162 color: #ff0000
163
164 h1
165 +large-text
166
167 is the same as:
168
169 @mixin large-text
170 font:
171 family: Arial
172 size: 20px
173 weight: bold
174 color: #ff0000
175
176 h1
177 @include large-text
283a784 @nex3 [Sass] Add a section on deprecations to INDENTED_SYNTAX.
nex3 authored
178
179 ## Deprecated Syntax
180
181 Since the indented syntax has been around for a while,
182 previous versions have made some syntactic decisions
183 that have since been changed.
184 Some of the old syntax still works, though,
185 so it's documented here.
186
187 **Note that this syntax is not recommended
188 for use in new Sass files**.
189 It will print a warning if it's used,
190 and it will be removed in a future version.
191
192 ### `=` for Properties and Variables
193
194 `=` used to be used instead of `:` when setting variables
195 and when setting properties to SassScript values.
196 It has slightly different semantics than `:`;
197 see {file:SASS_CHANGELOG.md#3-0-0-sass-script-context this changelog entry} for details.
198
199 ### `||=` for Default Variables
200
201 `||=` used to be used instead of `:` when setting the default value of a variable.
202 The `!default` flag was not used.
203 The variable value has the same semantics as `=`;
204 see {file:SASS_CHANGELOG.md#3-0-0-sass-script-context this changelog entry} for details.
205
206 ### `!` Prefix for Variables
207
208 `!` used to be used as the variable prefix instead of `$`.
209 This had no difference in functionality;
210 it was a purely aesthetic change.
Something went wrong with that request. Please try again.