haml-edge 2.1.21 → 2.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/EDGE_GEM_VERSION +1 -1
- data/FAQ.md +142 -0
- data/{README.rdoc → README.md} +141 -141
- data/Rakefile +29 -17
- data/VERSION +1 -1
- data/lib/haml/buffer.rb +63 -27
- data/lib/haml/engine.rb +103 -80
- data/lib/haml/error.rb +7 -7
- data/lib/haml/exec.rb +80 -26
- data/lib/haml/filters.rb +106 -40
- data/lib/haml/helpers/action_view_extensions.rb +34 -39
- data/lib/haml/helpers/action_view_mods.rb +132 -139
- data/lib/haml/helpers.rb +207 -153
- data/lib/haml/html.rb +40 -21
- data/lib/haml/precompiler.rb +2 -0
- data/lib/haml/shared.rb +34 -3
- data/lib/haml/template/patch.rb +1 -1
- data/lib/haml/template/plugin.rb +0 -2
- data/lib/haml/template.rb +5 -0
- data/lib/haml/util.rb +136 -1
- data/lib/haml/version.rb +16 -4
- data/lib/haml.rb +502 -481
- data/lib/sass/css.rb +106 -68
- data/lib/sass/engine.rb +55 -22
- data/lib/sass/environment.rb +52 -21
- data/lib/sass/error.rb +23 -12
- data/lib/sass/files.rb +27 -0
- data/lib/sass/plugin/merb.rb +2 -2
- data/lib/sass/plugin/rails.rb +0 -2
- data/lib/sass/plugin.rb +32 -23
- data/lib/sass/repl.rb +7 -0
- data/lib/sass/script/bool.rb +9 -5
- data/lib/sass/script/color.rb +87 -1
- data/lib/sass/script/funcall.rb +23 -2
- data/lib/sass/script/functions.rb +93 -44
- data/lib/sass/script/lexer.rb +33 -3
- data/lib/sass/script/literal.rb +93 -1
- data/lib/sass/script/node.rb +14 -0
- data/lib/sass/script/number.rb +128 -4
- data/lib/sass/script/operation.rb +16 -1
- data/lib/sass/script/parser.rb +51 -21
- data/lib/sass/script/string.rb +7 -4
- data/lib/sass/script/unary_operation.rb +14 -1
- data/lib/sass/script/variable.rb +12 -1
- data/lib/sass/script.rb +26 -5
- data/lib/sass/tree/attr_node.rb +46 -9
- data/lib/sass/tree/comment_node.rb +41 -1
- data/lib/sass/tree/debug_node.rb +8 -0
- data/lib/sass/tree/directive_node.rb +20 -0
- data/lib/sass/tree/file_node.rb +12 -0
- data/lib/sass/tree/for_node.rb +15 -0
- data/lib/sass/tree/if_node.rb +22 -0
- data/lib/sass/tree/mixin_def_node.rb +12 -1
- data/lib/sass/tree/mixin_node.rb +13 -0
- data/lib/sass/tree/node.rb +136 -6
- data/lib/sass/tree/rule_node.rb +66 -7
- data/lib/sass/tree/variable_node.rb +10 -0
- data/lib/sass/tree/while_node.rb +11 -1
- data/lib/sass.rb +544 -534
- metadata +7 -6
- data/FAQ +0 -138
data/lib/sass.rb
CHANGED
@@ -3,7 +3,7 @@ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
|
|
3
3
|
|
4
4
|
require 'haml/version'
|
5
5
|
|
6
|
-
#
|
6
|
+
# # Sass (Syntactically Awesome StyleSheets)
|
7
7
|
#
|
8
8
|
# Sass is a meta-language on top of CSS
|
9
9
|
# that's used to describe the style of a document
|
@@ -13,14 +13,14 @@ require 'haml/version'
|
|
13
13
|
# and implements various features that are useful
|
14
14
|
# for creating manageable stylesheets.
|
15
15
|
#
|
16
|
-
#
|
16
|
+
# ## Features
|
17
17
|
#
|
18
18
|
# * Whitespace active
|
19
19
|
# * Well-formatted output
|
20
20
|
# * Elegant input
|
21
21
|
# * Feature-rich
|
22
22
|
#
|
23
|
-
#
|
23
|
+
# ## Using Sass
|
24
24
|
#
|
25
25
|
# Sass can be used in three ways:
|
26
26
|
# as a plugin for Ruby on Rails,
|
@@ -31,17 +31,17 @@ require 'haml/version'
|
|
31
31
|
# Sass will already be installed as a plugin or gem, respectively.
|
32
32
|
# The first step for all of these is to install the Haml gem:
|
33
33
|
#
|
34
|
-
#
|
34
|
+
# gem install haml
|
35
35
|
#
|
36
36
|
# To enable it as a Rails plugin,
|
37
37
|
# then run
|
38
38
|
#
|
39
|
-
#
|
39
|
+
# haml --rails path/to/rails/app
|
40
40
|
#
|
41
41
|
# To enable Sass in Merb,
|
42
42
|
# add
|
43
43
|
#
|
44
|
-
#
|
44
|
+
# dependency "merb-haml"
|
45
45
|
#
|
46
46
|
# to config/dependencies.rb.
|
47
47
|
#
|
@@ -55,30 +55,30 @@ require 'haml/version'
|
|
55
55
|
#
|
56
56
|
# To run Sass from the command line, just use
|
57
57
|
#
|
58
|
-
#
|
58
|
+
# sass input.sass output.css
|
59
59
|
#
|
60
|
-
# Use
|
60
|
+
# Use `sass --help` for full documentation.
|
61
61
|
#
|
62
62
|
# Using Sass in Ruby code is very simple.
|
63
63
|
# After installing the Haml gem,
|
64
|
-
# you can use it by running
|
64
|
+
# you can use it by running `require "sass"`
|
65
65
|
# and using Sass::Engine like so:
|
66
66
|
#
|
67
|
-
#
|
68
|
-
#
|
67
|
+
# engine = Sass::Engine.new("#main\n :background-color #0000ff")
|
68
|
+
# engine.render #=> "#main { background-color: #0000ff; }\n"
|
69
69
|
#
|
70
|
-
#
|
70
|
+
# ## CSS Rules
|
71
71
|
#
|
72
72
|
# Rules in flat CSS have two elements:
|
73
73
|
# the selector
|
74
|
-
# (e.g.
|
74
|
+
# (e.g. `#main`, `div p`, `li a:hover`)
|
75
75
|
# and the attributes
|
76
|
-
# (e.g.
|
76
|
+
# (e.g. `color: #00ff00;`, `width: 5em;`).
|
77
77
|
#
|
78
78
|
# Sass has both of these,
|
79
79
|
# as well as one additional element: nested rules.
|
80
80
|
#
|
81
|
-
#
|
81
|
+
# ### Rules and Selectors
|
82
82
|
#
|
83
83
|
# However, some of the syntax is a little different.
|
84
84
|
# The syntax for selectors is the same,
|
@@ -86,21 +86,21 @@ require 'haml/version'
|
|
86
86
|
# Sass uses indentation.
|
87
87
|
# For example:
|
88
88
|
#
|
89
|
-
#
|
90
|
-
#
|
91
|
-
#
|
92
|
-
#
|
89
|
+
# #main p
|
90
|
+
# <attribute>
|
91
|
+
# <attribute>
|
92
|
+
# ...
|
93
93
|
#
|
94
94
|
# Like CSS, you can stretch rules over multiple lines.
|
95
95
|
# However, unlike CSS, you can only do this if each line but the last
|
96
96
|
# ends with a comma.
|
97
97
|
# For example:
|
98
98
|
#
|
99
|
-
#
|
100
|
-
#
|
101
|
-
#
|
99
|
+
# .users #userTab,
|
100
|
+
# .posts #postsTab
|
101
|
+
# <attributes>
|
102
102
|
#
|
103
|
-
#
|
103
|
+
# ### Attributes
|
104
104
|
#
|
105
105
|
# There are two different ways to write CSS attrbibutes.
|
106
106
|
# The first is very similar to the how you're used to writing them:
|
@@ -109,15 +109,15 @@ require 'haml/version'
|
|
109
109
|
# each attribute is on its own line, so they aren't necessary.
|
110
110
|
# For example:
|
111
111
|
#
|
112
|
-
#
|
113
|
-
#
|
114
|
-
#
|
112
|
+
# #main p
|
113
|
+
# color: #00ff00
|
114
|
+
# width: 97%
|
115
115
|
#
|
116
116
|
# is compiled to:
|
117
117
|
#
|
118
|
-
#
|
119
|
-
#
|
120
|
-
#
|
118
|
+
# #main p {
|
119
|
+
# color: #00ff00;
|
120
|
+
# width: 97% }
|
121
121
|
#
|
122
122
|
# The second syntax for attributes is slightly different.
|
123
123
|
# The colon is at the beginning of the attribute,
|
@@ -125,123 +125,123 @@ require 'haml/version'
|
|
125
125
|
# so it's easier to tell what elements are attributes just by glancing at them.
|
126
126
|
# For example:
|
127
127
|
#
|
128
|
-
#
|
129
|
-
#
|
130
|
-
#
|
128
|
+
# #main p
|
129
|
+
# :color #00ff00
|
130
|
+
# :width 97%
|
131
131
|
#
|
132
132
|
# is compiled to:
|
133
133
|
#
|
134
|
-
#
|
135
|
-
#
|
136
|
-
#
|
134
|
+
# #main p {
|
135
|
+
# color: #00ff00;
|
136
|
+
# width: 97% }
|
137
137
|
#
|
138
138
|
# By default, either attribute syntax may be used.
|
139
139
|
# If you want to force one or the other,
|
140
|
-
# see the
|
140
|
+
# see the `:attribute_syntax` option below.
|
141
141
|
#
|
142
|
-
#
|
142
|
+
# ### Nested Rules
|
143
143
|
#
|
144
144
|
# Rules can also be nested within each other.
|
145
145
|
# This signifies that the inner rule's selector is a child of the outer selector.
|
146
146
|
# For example:
|
147
147
|
#
|
148
|
-
#
|
149
|
-
#
|
150
|
-
#
|
148
|
+
# #main p
|
149
|
+
# :color #00ff00
|
150
|
+
# :width 97%
|
151
151
|
#
|
152
|
-
#
|
153
|
-
#
|
154
|
-
#
|
152
|
+
# .redbox
|
153
|
+
# :background-color #ff0000
|
154
|
+
# :color #000000
|
155
155
|
#
|
156
156
|
# is compiled to:
|
157
157
|
#
|
158
|
-
#
|
159
|
-
#
|
160
|
-
#
|
161
|
-
#
|
162
|
-
#
|
163
|
-
#
|
158
|
+
# #main p {
|
159
|
+
# color: #00ff00;
|
160
|
+
# width: 97%; }
|
161
|
+
# #main p .redbox {
|
162
|
+
# background-color: #ff0000;
|
163
|
+
# color: #000000; }
|
164
164
|
#
|
165
165
|
# This makes insanely complicated CSS layouts with lots of nested selectors very simple:
|
166
166
|
#
|
167
|
-
#
|
168
|
-
#
|
167
|
+
# #main
|
168
|
+
# :width 97%
|
169
169
|
#
|
170
|
-
#
|
171
|
-
#
|
172
|
-
#
|
173
|
-
#
|
170
|
+
# p, div
|
171
|
+
# :font-size 2em
|
172
|
+
# a
|
173
|
+
# :font-weight bold
|
174
174
|
#
|
175
|
-
#
|
176
|
-
#
|
175
|
+
# pre
|
176
|
+
# :font-size 3em
|
177
177
|
#
|
178
178
|
# is compiled to:
|
179
179
|
#
|
180
|
-
#
|
181
|
-
#
|
182
|
-
#
|
183
|
-
#
|
184
|
-
#
|
185
|
-
#
|
186
|
-
#
|
187
|
-
#
|
180
|
+
# #main {
|
181
|
+
# width: 97%; }
|
182
|
+
# #main p, #main div {
|
183
|
+
# font-size: 2em; }
|
184
|
+
# #main p a, #main div a {
|
185
|
+
# font-weight: bold; }
|
186
|
+
# #main pre {
|
187
|
+
# font-size: 3em; }
|
188
188
|
#
|
189
|
-
#
|
189
|
+
# ### Referencing Parent Rules
|
190
190
|
#
|
191
191
|
# In addition to the default behavior of inserting the parent selector
|
192
192
|
# as a CSS parent of the current selector
|
193
|
-
# (e.g. above,
|
193
|
+
# (e.g. above, `#main` is the parent of `p`),
|
194
194
|
# you can have more fine-grained control over what's done with the parent selector
|
195
|
-
# by using the ampersand character
|
195
|
+
# by using the ampersand character `&` in your selectors.
|
196
196
|
#
|
197
197
|
# The ampersand is automatically replaced by the parent selector,
|
198
198
|
# instead of having it prepended.
|
199
199
|
# This allows you to cleanly create pseudo-attributes:
|
200
200
|
#
|
201
|
-
#
|
202
|
-
#
|
203
|
-
#
|
204
|
-
#
|
205
|
-
#
|
206
|
-
#
|
207
|
-
#
|
201
|
+
# a
|
202
|
+
# :font-weight bold
|
203
|
+
# :text-decoration none
|
204
|
+
# &:hover
|
205
|
+
# :text-decoration underline
|
206
|
+
# &:visited
|
207
|
+
# :font-weight normal
|
208
208
|
#
|
209
209
|
# Which would become:
|
210
210
|
#
|
211
|
-
#
|
212
|
-
#
|
213
|
-
#
|
214
|
-
#
|
215
|
-
#
|
216
|
-
#
|
217
|
-
#
|
211
|
+
# a {
|
212
|
+
# font-weight: bold;
|
213
|
+
# text-decoration: none; }
|
214
|
+
# a:hover {
|
215
|
+
# text-decoration: underline; }
|
216
|
+
# a:visited {
|
217
|
+
# font-weight: normal; }
|
218
218
|
#
|
219
219
|
# It also allows you to add selectors at the base of the hierarchy,
|
220
220
|
# which can be useuful for targeting certain styles to certain browsers:
|
221
221
|
#
|
222
|
-
#
|
223
|
-
#
|
224
|
-
#
|
225
|
-
#
|
226
|
-
#
|
227
|
-
#
|
228
|
-
#
|
222
|
+
# #main
|
223
|
+
# :width 90%
|
224
|
+
# #sidebar
|
225
|
+
# :float left
|
226
|
+
# :margin-left 20%
|
227
|
+
# .ie6 &
|
228
|
+
# :margin-left 40%
|
229
229
|
#
|
230
230
|
# Which would become:
|
231
231
|
#
|
232
|
-
#
|
233
|
-
#
|
234
|
-
#
|
235
|
-
#
|
236
|
-
#
|
237
|
-
#
|
238
|
-
#
|
232
|
+
# #main {
|
233
|
+
# width: 90%; }
|
234
|
+
# #main #sidebar {
|
235
|
+
# float: left;
|
236
|
+
# margin-left: 20%; }
|
237
|
+
# .ie6 #main #sidebar {
|
238
|
+
# margin-left: 40%; }
|
239
239
|
#
|
240
|
-
#
|
240
|
+
# ### Attribute Namespaces
|
241
241
|
#
|
242
242
|
# CSS has quite a few attributes that are in "namespaces;"
|
243
|
-
# for instance,
|
244
|
-
# are all in the
|
243
|
+
# for instance, `font-family`, `font-size`, and `font-weight`
|
244
|
+
# are all in the `font` namespace.
|
245
245
|
# In CSS, if you want to set a bunch of attributes in the same namespace,
|
246
246
|
# you have to type it out each time.
|
247
247
|
# Sass offers a shortcut for this:
|
@@ -249,54 +249,54 @@ require 'haml/version'
|
|
249
249
|
# then indent each of the sub-attributes within it.
|
250
250
|
# For example:
|
251
251
|
#
|
252
|
-
#
|
253
|
-
#
|
254
|
-
#
|
255
|
-
#
|
256
|
-
#
|
252
|
+
# .funky
|
253
|
+
# :font
|
254
|
+
# :family fantasy
|
255
|
+
# :size 30em
|
256
|
+
# :weight bold
|
257
257
|
#
|
258
258
|
# is compiled to:
|
259
259
|
#
|
260
|
-
#
|
261
|
-
#
|
262
|
-
#
|
263
|
-
#
|
260
|
+
# .funky {
|
261
|
+
# font-family: fantasy;
|
262
|
+
# font-size: 30em;
|
263
|
+
# font-weight: bold; }
|
264
264
|
#
|
265
|
-
#
|
265
|
+
# ### Rule Escaping
|
266
266
|
#
|
267
267
|
# In case, for whatever reason, you need to write a rule
|
268
268
|
# that begins with a Sass-meaningful character,
|
269
|
-
# you can escape it with a backslash (
|
269
|
+
# you can escape it with a backslash (`\`).
|
270
270
|
# For example:
|
271
271
|
#
|
272
|
-
#
|
273
|
-
#
|
274
|
-
#
|
272
|
+
# #main
|
273
|
+
# \+div
|
274
|
+
# clear: both
|
275
275
|
#
|
276
276
|
# is compiled to:
|
277
277
|
#
|
278
|
-
#
|
279
|
-
#
|
278
|
+
# #main +div {
|
279
|
+
# clear: both; }
|
280
280
|
#
|
281
|
-
#
|
281
|
+
# ## Directives
|
282
282
|
#
|
283
283
|
# Directives allow the author to directly issue instructions to the Sass compiler.
|
284
|
-
# They're prefixed with an at sign,
|
284
|
+
# They're prefixed with an at sign, `@`,
|
285
285
|
# followed by the name of the directive,
|
286
286
|
# a space, and any arguments to it -
|
287
287
|
# just like CSS directives.
|
288
288
|
# For example:
|
289
289
|
#
|
290
|
-
#
|
290
|
+
# @import red.sass
|
291
291
|
#
|
292
292
|
# Some directives can also control whether or how many times
|
293
293
|
# a chunk of Sass is output.
|
294
294
|
# Those are documented under Control Structures.
|
295
295
|
#
|
296
|
-
#
|
296
|
+
# ### `@import`
|
297
297
|
#
|
298
|
-
# The
|
299
|
-
# and sometimes compiles to a literal CSS
|
298
|
+
# The `@import` directive works in a very similar way to the CSS import directive,
|
299
|
+
# and sometimes compiles to a literal CSS `@import`.
|
300
300
|
#
|
301
301
|
# Sass can import either other Sass files or plain CSS files.
|
302
302
|
# If it imports a Sass file,
|
@@ -306,11 +306,11 @@ require 'haml/version'
|
|
306
306
|
# Sass looks for other Sass files in the working directory,
|
307
307
|
# and the Sass file directory under Rails or Merb.
|
308
308
|
# Additional search directories may be specified
|
309
|
-
# using the
|
309
|
+
# using the `:load_paths` option (see below).
|
310
310
|
#
|
311
311
|
# Sass can also import plain CSS files.
|
312
312
|
# In this case, it doesn't literally include the content of the files;
|
313
|
-
# rather, it uses the built-in CSS
|
313
|
+
# rather, it uses the built-in CSS `@import` directive to tell the client program
|
314
314
|
# to import the files.
|
315
315
|
#
|
316
316
|
# The import directive can take either a full filename
|
@@ -321,370 +321,370 @@ require 'haml/version'
|
|
321
321
|
#
|
322
322
|
# For example,
|
323
323
|
#
|
324
|
-
#
|
324
|
+
# @import foo.sass
|
325
325
|
#
|
326
326
|
# would compile to
|
327
327
|
#
|
328
|
-
#
|
329
|
-
#
|
328
|
+
# .foo
|
329
|
+
# :color #f00
|
330
330
|
#
|
331
331
|
# whereas
|
332
332
|
#
|
333
|
-
#
|
333
|
+
# @import foo.css
|
334
334
|
#
|
335
335
|
# would compile to
|
336
336
|
#
|
337
|
-
#
|
337
|
+
# @import foo.css
|
338
338
|
#
|
339
339
|
# Finally,
|
340
340
|
#
|
341
|
-
#
|
341
|
+
# @import foo
|
342
342
|
#
|
343
343
|
# might compile to either,
|
344
344
|
# depending on whether a file called "foo.sass" existed.
|
345
345
|
#
|
346
|
-
#
|
346
|
+
# ### `@debug`
|
347
347
|
#
|
348
|
-
# The
|
348
|
+
# The `@debug` directive prints the value of a SassScript expression
|
349
349
|
# to standard error.
|
350
350
|
# It's useful for debugging Sass files
|
351
351
|
# that have complicated SassScript going on.
|
352
352
|
# For example:
|
353
353
|
#
|
354
|
-
#
|
354
|
+
# @debug 10em + 12em
|
355
355
|
#
|
356
356
|
# outputs:
|
357
357
|
#
|
358
|
-
#
|
358
|
+
# Line 1 DEBUG: 22em
|
359
359
|
#
|
360
|
-
#
|
360
|
+
# ### `@font-face`, `@media`, etc.
|
361
361
|
#
|
362
362
|
# Sass behaves as you'd expect for normal CSS @-directives.
|
363
363
|
# For example:
|
364
364
|
#
|
365
|
-
#
|
366
|
-
#
|
367
|
-
#
|
365
|
+
# @font-face
|
366
|
+
# font-family: "Bitstream Vera Sans"
|
367
|
+
# src: url(http://foo.bar/bvs")
|
368
368
|
#
|
369
369
|
# compiles to:
|
370
370
|
#
|
371
|
-
#
|
372
|
-
#
|
373
|
-
#
|
371
|
+
# @font-face {
|
372
|
+
# font-family: "Bitstream Vera Sans";
|
373
|
+
# src: url(http://foo.bar/bvs"); }
|
374
374
|
#
|
375
375
|
# and
|
376
376
|
#
|
377
|
-
#
|
378
|
-
#
|
379
|
-
#
|
377
|
+
# @media print
|
378
|
+
# #sidebar
|
379
|
+
# display: none
|
380
380
|
#
|
381
|
-
#
|
382
|
-
#
|
381
|
+
# #main
|
382
|
+
# background-color: white
|
383
383
|
#
|
384
384
|
# compiles to:
|
385
385
|
#
|
386
|
-
#
|
387
|
-
#
|
388
|
-
#
|
386
|
+
# @media print {
|
387
|
+
# #sidebar {
|
388
|
+
# display: none; }
|
389
389
|
#
|
390
|
-
#
|
391
|
-
#
|
392
|
-
# }
|
390
|
+
# #main {
|
391
|
+
# background-color: white; } }
|
393
392
|
#
|
394
|
-
#
|
393
|
+
# ## SassScript
|
395
394
|
#
|
396
395
|
# In addition to the declarative templating system,
|
397
396
|
# Sass supports a simple language known as SassScript
|
398
397
|
# for dynamically computing CSS values and controlling
|
399
398
|
# the styles and selectors that get emitted.
|
400
399
|
#
|
401
|
-
#
|
400
|
+
# ### Interactive Shell
|
402
401
|
#
|
403
402
|
# You can easily experiment with SassScript using the interactive shell.
|
404
|
-
# To launch the shell run the sass command-line with the
|
403
|
+
# To launch the shell run the sass command-line with the `-i` option. At the
|
405
404
|
# prompt, enter any legal SassScript expression to have it evaluated
|
406
405
|
# and the result printed out for you:
|
407
406
|
#
|
408
|
-
#
|
409
|
-
#
|
410
|
-
#
|
411
|
-
#
|
412
|
-
#
|
413
|
-
#
|
414
|
-
#
|
415
|
-
#
|
416
|
-
#
|
407
|
+
# $ sass -i
|
408
|
+
# >> "Hello, Sassy World!"
|
409
|
+
# "Hello, Sassy World!"
|
410
|
+
# >> 1px + 1px + 1px
|
411
|
+
# 3px
|
412
|
+
# >> #777 + #777
|
413
|
+
# #eeeeee
|
414
|
+
# >> #777 + #888
|
415
|
+
# white
|
417
416
|
#
|
418
|
-
#
|
417
|
+
# ### Variables
|
419
418
|
#
|
420
419
|
# The most straightforward way to use SassScript
|
421
420
|
# is to set and reference variables.
|
422
421
|
# Variables begin with exclamation marks,
|
423
422
|
# and are set like so:
|
424
423
|
#
|
425
|
-
#
|
424
|
+
# !width = 5em
|
426
425
|
#
|
427
426
|
# You can then refer to them by putting an equals sign
|
428
427
|
# after your attributes:
|
429
428
|
#
|
430
|
-
#
|
431
|
-
#
|
429
|
+
# #main
|
430
|
+
# :width = !width
|
432
431
|
#
|
433
432
|
# Variables that are first defined in a scoped context are only
|
434
433
|
# available in that context.
|
435
434
|
#
|
436
|
-
#
|
435
|
+
# ### Data Types
|
437
436
|
#
|
438
437
|
# SassScript supports four data types:
|
439
|
-
# * numbers (e.g.
|
440
|
-
# * strings of text (e.g.
|
441
|
-
# * colors (e.g.
|
442
|
-
# * booleans (e.g.
|
438
|
+
# * numbers (e.g. `1.2`, `13`, `10px`)
|
439
|
+
# * strings of text (e.g. `"foo"`, `"bar"`)
|
440
|
+
# * colors (e.g. `blue`, `##04a3f9`)
|
441
|
+
# * booleans (e.g. `true`, `false`)
|
443
442
|
#
|
444
443
|
# Any text that doesn't fit into one of those types
|
445
444
|
# in a SassScript context will cause an error:
|
446
445
|
#
|
447
|
-
#
|
448
|
-
#
|
449
|
-
#
|
450
|
-
#
|
451
|
-
#
|
452
|
-
#
|
453
|
-
#
|
446
|
+
# p
|
447
|
+
# !width = 5em
|
448
|
+
# // This will cause an error
|
449
|
+
# :border = !width solid blue
|
450
|
+
# // Use one of the following forms instead:
|
451
|
+
# :border = "#{!width} solid blue"
|
452
|
+
# :border = !width "solid" "blue"
|
454
453
|
#
|
455
454
|
# is compiled to:
|
456
455
|
#
|
457
|
-
#
|
458
|
-
#
|
459
|
-
#
|
456
|
+
# p {
|
457
|
+
# border: 5em solid blue;
|
458
|
+
# border: 5em solid blue; }
|
460
459
|
#
|
461
460
|
#
|
462
|
-
#
|
461
|
+
# ### Operations
|
463
462
|
#
|
464
463
|
# SassScript supports the standard arithmetic operations on numbers
|
465
|
-
# (
|
464
|
+
# (`+`, `-`, `*`, `/`, `%`),
|
466
465
|
# and will automatically convert between units if it can:
|
467
466
|
#
|
468
|
-
#
|
469
|
-
#
|
467
|
+
# p
|
468
|
+
# :width = 1in + 8pt
|
470
469
|
#
|
471
470
|
# is compiled to:
|
472
471
|
#
|
473
|
-
#
|
474
|
-
#
|
472
|
+
# p {
|
473
|
+
# width: 1.111in; }
|
475
474
|
#
|
476
475
|
# Relational operators
|
477
|
-
# (
|
476
|
+
# (`<`, `>`, `<=`, `>=`)
|
478
477
|
# are also supported for numbers,
|
479
478
|
# and equality operators
|
480
|
-
# (
|
479
|
+
# (`==`, `!=`)
|
481
480
|
# are supported for all types.
|
482
481
|
#
|
483
482
|
# Most arithmetic operations are supported for color values,
|
484
483
|
# where they work piecewise:
|
485
484
|
#
|
486
|
-
#
|
487
|
-
#
|
485
|
+
# p
|
486
|
+
# :color = #010203 + #040506
|
488
487
|
#
|
489
488
|
# is compiled to:
|
490
489
|
#
|
491
|
-
#
|
492
|
-
#
|
490
|
+
# p {
|
491
|
+
# color: #050709; }
|
493
492
|
#
|
494
493
|
# Some arithmetic operations even work between numbers and colors:
|
495
494
|
#
|
496
|
-
#
|
497
|
-
#
|
495
|
+
# p
|
496
|
+
# :color = #010203 * 2
|
498
497
|
#
|
499
498
|
# is compiled to:
|
500
499
|
#
|
501
|
-
#
|
502
|
-
#
|
500
|
+
# p {
|
501
|
+
# color: #020406; }
|
503
502
|
#
|
504
|
-
# The
|
503
|
+
# The `+` operation can be used to concatenate strings:
|
505
504
|
#
|
506
|
-
#
|
507
|
-
#
|
505
|
+
# p
|
506
|
+
# :cursor = "e" + "-resize"
|
508
507
|
#
|
509
508
|
# is compiled to:
|
510
509
|
#
|
511
|
-
#
|
512
|
-
#
|
510
|
+
# p {
|
511
|
+
# cursor: e-resize; }
|
513
512
|
#
|
514
513
|
# Within a string of text, #{} style interpolation can be used to
|
515
514
|
# place dynamic values within the string:
|
516
515
|
#
|
517
|
-
#
|
518
|
-
#
|
516
|
+
# p
|
517
|
+
# :border = "#{5px + 10pt} solid #ccc"
|
519
518
|
#
|
520
|
-
# Finally, SassScript supports
|
519
|
+
# Finally, SassScript supports `and`, `or`, and `not` operators
|
521
520
|
# for boolean values.
|
522
521
|
#
|
523
|
-
#
|
522
|
+
# ### Parentheses
|
524
523
|
#
|
525
524
|
# Parentheses can be used to affect the order of operations:
|
526
525
|
#
|
527
|
-
#
|
528
|
-
#
|
526
|
+
# p
|
527
|
+
# :width = 1em + (2em * 3)
|
529
528
|
#
|
530
529
|
# is compiled to:
|
531
530
|
#
|
532
|
-
#
|
533
|
-
#
|
531
|
+
# p {
|
532
|
+
# width: 7em; }
|
534
533
|
#
|
535
|
-
#
|
534
|
+
# ### Functions
|
536
535
|
#
|
537
536
|
# SassScript defines some useful functions
|
538
537
|
# that are called using the normal CSS function syntax:
|
539
538
|
#
|
540
|
-
#
|
541
|
-
#
|
539
|
+
# p
|
540
|
+
# :color = hsl(0, 100%, 50%)
|
542
541
|
#
|
543
542
|
# is compiled to:
|
544
543
|
#
|
545
|
-
#
|
546
|
-
#
|
544
|
+
# #main {
|
545
|
+
# color: #ff0000; }
|
547
546
|
#
|
548
|
-
# The following functions are provided:
|
547
|
+
# The following functions are provided: `hsl`, `percentage`, `round`, `ceil`, `floor`, and `abs`.
|
549
548
|
# You can define additional functions in ruby.
|
550
549
|
#
|
551
|
-
# See Sass::Script::Functions for more information.
|
550
|
+
# See {Sass::Script::Functions} for more information.
|
552
551
|
#
|
553
|
-
#
|
552
|
+
# ### Interpolation
|
554
553
|
#
|
555
554
|
# You can also use SassScript variables in selectors
|
556
555
|
# and attribute names using #{} interpolation syntax:
|
557
556
|
#
|
558
|
-
#
|
559
|
-
#
|
560
|
-
#
|
561
|
-
#
|
557
|
+
# !name = foo
|
558
|
+
# !attr = border
|
559
|
+
# p.#{!name}
|
560
|
+
# #{attr}-color: blue
|
562
561
|
#
|
563
562
|
# is compiled to:
|
564
563
|
#
|
565
|
-
#
|
566
|
-
#
|
564
|
+
# p.foo {
|
565
|
+
# border-color: blue; }
|
567
566
|
#
|
568
|
-
#
|
567
|
+
# ### Optional Assignment
|
569
568
|
#
|
570
569
|
# You can assign to variables if they aren't already assigned
|
571
|
-
# using the
|
570
|
+
# using the `||=` assignment operator. This means that if the
|
572
571
|
# variable has already been assigned to, it won't be re-assigned,
|
573
572
|
# but if it doesn't have a value yet, it will be given one.
|
574
573
|
#
|
575
574
|
# For example:
|
576
575
|
#
|
577
|
-
#
|
578
|
-
#
|
579
|
-
#
|
576
|
+
# !content = "First content"
|
577
|
+
# !content ||= "Second content?"
|
578
|
+
# !new_content ||= "First time reference"
|
580
579
|
#
|
581
|
-
#
|
582
|
-
#
|
583
|
-
#
|
580
|
+
# #main
|
581
|
+
# content = !content
|
582
|
+
# new-content = !new_content
|
584
583
|
#
|
585
584
|
# is compiled to:
|
586
585
|
#
|
587
|
-
#
|
588
|
-
#
|
589
|
-
#
|
586
|
+
# #main {
|
587
|
+
# content: First content;
|
588
|
+
# new-content: First time reference; }
|
590
589
|
#
|
591
|
-
#
|
590
|
+
# ## Control Structures
|
592
591
|
#
|
593
592
|
# SassScript supports basic control structures for looping and conditionals
|
594
593
|
# using the same syntax as directives.
|
595
594
|
#
|
596
|
-
#
|
595
|
+
# ### `@if`
|
597
596
|
#
|
598
|
-
# The
|
597
|
+
# The `@if` statement takes a SassScript expression
|
599
598
|
# and prints the code nested beneath it if the expression returns
|
600
|
-
# anything other than
|
599
|
+
# anything other than `false`:
|
601
600
|
#
|
602
|
-
#
|
603
|
-
#
|
604
|
-
#
|
605
|
-
#
|
606
|
-
#
|
601
|
+
# p
|
602
|
+
# @if 1 + 1 == 2
|
603
|
+
# :border 1px solid
|
604
|
+
# @if 5 < 3
|
605
|
+
# :border 2px dotted
|
607
606
|
#
|
608
607
|
# is compiled to:
|
609
608
|
#
|
610
|
-
#
|
611
|
-
#
|
609
|
+
# p {
|
610
|
+
# border: 1px solid; }
|
612
611
|
#
|
613
|
-
# The
|
614
|
-
# and one
|
615
|
-
# If the
|
616
|
-
# the
|
617
|
-
# until one succeeds or the
|
612
|
+
# The `@if` statement can be followed by several `@else if` statements
|
613
|
+
# and one `@else` statement.
|
614
|
+
# If the `@if` statement fails,
|
615
|
+
# the `@else if` statements are tried in order
|
616
|
+
# until one succeeds or the `@else` is reached.
|
618
617
|
# For example:
|
619
618
|
#
|
620
|
-
#
|
621
|
-
#
|
622
|
-
#
|
623
|
-
#
|
624
|
-
#
|
625
|
-
#
|
626
|
-
#
|
627
|
-
#
|
628
|
-
#
|
629
|
-
#
|
619
|
+
# !type = "monster"
|
620
|
+
# p
|
621
|
+
# @if !type == "ocean"
|
622
|
+
# :color blue
|
623
|
+
# @else if !type == "matador"
|
624
|
+
# :color red
|
625
|
+
# @else if !type == "monster"
|
626
|
+
# :color green
|
627
|
+
# @else
|
628
|
+
# :color black
|
630
629
|
#
|
631
630
|
# is compiled to:
|
632
631
|
#
|
633
|
-
#
|
634
|
-
#
|
632
|
+
# p {
|
633
|
+
# color: green; }
|
635
634
|
#
|
636
|
-
#
|
635
|
+
# ### `@for`
|
637
636
|
#
|
638
|
-
# The
|
639
|
-
#
|
640
|
-
#
|
641
|
-
#
|
642
|
-
# and
|
637
|
+
# The `@for` statement has two forms:
|
638
|
+
# `@for <var> from <start> to <end>` or
|
639
|
+
# `@for <var> from <start> through <end>`.
|
640
|
+
# `<var>` is a variable name, like `!i`,
|
641
|
+
# and `<start>` and `<end>` are SassScript expressions
|
643
642
|
# that should return integers.
|
644
643
|
#
|
645
|
-
# The
|
646
|
-
# from
|
647
|
-
# including
|
644
|
+
# The `@for` statement sets `<var>` to each number
|
645
|
+
# from `<start>` to `<end>`,
|
646
|
+
# including `<end>` if `through` is used.
|
648
647
|
# For example:
|
649
648
|
#
|
650
|
-
#
|
651
|
-
#
|
652
|
-
#
|
649
|
+
# @for !i from 1 through 3
|
650
|
+
# .item-#{!i}
|
651
|
+
# :width = 2em * !i
|
653
652
|
#
|
654
653
|
# is compiled to:
|
655
654
|
#
|
656
|
-
#
|
657
|
-
#
|
658
|
-
#
|
659
|
-
#
|
660
|
-
#
|
661
|
-
#
|
655
|
+
# .item-1 {
|
656
|
+
# width: 2em; }
|
657
|
+
# .item-2 {
|
658
|
+
# width: 4em; }
|
659
|
+
# .item-3 {
|
660
|
+
# width: 6em; }
|
662
661
|
#
|
663
|
-
#
|
662
|
+
# ### `@while`
|
664
663
|
#
|
665
|
-
# The
|
666
|
-
# block until the statement evaluates to false
|
667
|
-
# be used to achieve more complex looping than the
|
664
|
+
# The `@while` statement repeatedly loops over the nested
|
665
|
+
# block until the statement evaluates to `false`. This can
|
666
|
+
# be used to achieve more complex looping than the `@for`
|
668
667
|
# statement is capable of.
|
669
668
|
# For example:
|
670
|
-
#
|
671
|
-
#
|
672
|
-
#
|
673
|
-
#
|
674
|
-
#
|
669
|
+
#
|
670
|
+
# !i = 6
|
671
|
+
# @while !i > 0
|
672
|
+
# .item-#{!i}
|
673
|
+
# :width = 2em * !i
|
674
|
+
# !i = !i - 2
|
675
675
|
#
|
676
676
|
# is compiled to:
|
677
677
|
#
|
678
|
-
#
|
679
|
-
#
|
678
|
+
# .item-6 {
|
679
|
+
# width: 12em; }
|
680
680
|
#
|
681
|
-
#
|
682
|
-
#
|
681
|
+
# .item-4 {
|
682
|
+
# width: 8em; }
|
683
683
|
#
|
684
|
-
#
|
685
|
-
#
|
684
|
+
# .item-2 {
|
685
|
+
# width: 4em; }
|
686
686
|
#
|
687
|
-
#
|
687
|
+
# ## Mixins
|
688
688
|
#
|
689
689
|
# Mixins enable you to define groups of CSS attributes and
|
690
690
|
# then include them inline in any number of selectors
|
@@ -692,203 +692,201 @@ require 'haml/version'
|
|
692
692
|
# stylesheets DRY and also avoid placing presentation
|
693
693
|
# classes in your markup.
|
694
694
|
#
|
695
|
-
#
|
695
|
+
# ### Defining a Mixin
|
696
696
|
#
|
697
697
|
# To define a mixin you use a slightly modified form of selector syntax.
|
698
|
-
# For example the
|
698
|
+
# For example the `large-text` mixin is defined as follows:
|
699
699
|
#
|
700
|
-
#
|
701
|
-
#
|
702
|
-
#
|
703
|
-
#
|
704
|
-
#
|
705
|
-
#
|
700
|
+
# =large-text
|
701
|
+
# :font
|
702
|
+
# :family Arial
|
703
|
+
# :size 20px
|
704
|
+
# :weight bold
|
705
|
+
# :color #ff0000
|
706
706
|
#
|
707
|
-
# The initial
|
707
|
+
# The initial `=` marks this as a mixin rather than a standard selector.
|
708
708
|
# The CSS rules that follow won't be included until the mixin is referenced later on.
|
709
709
|
# Anything you can put into a standard selector,
|
710
|
-
# you can put into a mixin definition.
|
711
|
-
#
|
712
|
-
# =clearfix
|
713
|
-
# display: inline-block
|
714
|
-
# &:after
|
715
|
-
# content: "."
|
716
|
-
# display: block
|
717
|
-
# height: 0
|
718
|
-
# clear: both
|
719
|
-
# visibility: hidden
|
720
|
-
# * html &
|
721
|
-
# height: 1px
|
710
|
+
# you can put into a mixin definition.
|
711
|
+
# For example:
|
722
712
|
#
|
713
|
+
# =clearfix
|
714
|
+
# display: inline-block
|
715
|
+
# &:after
|
716
|
+
# content: "."
|
717
|
+
# display: block
|
718
|
+
# height: 0
|
719
|
+
# clear: both
|
720
|
+
# visibility: hidden
|
721
|
+
# * html &
|
722
|
+
# height: 1px
|
723
723
|
#
|
724
|
-
#
|
724
|
+
# ### Mixing it in
|
725
725
|
#
|
726
726
|
# Inlining a defined mixin is simple,
|
727
|
-
# just prepend a
|
728
|
-
# So to inline the
|
729
|
-
# we include the statment
|
730
|
-
#
|
731
|
-
# .page-title
|
732
|
-
# +large-text
|
733
|
-
# :padding 4px
|
734
|
-
# :margin
|
735
|
-
# :top 10px
|
727
|
+
# just prepend a `+` symbol to the name of a mixin defined earlier in the document.
|
728
|
+
# So to inline the `large-text` defined earlier,
|
729
|
+
# we include the statment `+large-text` in our selector definition thus:
|
736
730
|
#
|
731
|
+
# .page-title
|
732
|
+
# +large-text
|
733
|
+
# :padding 4px
|
734
|
+
# :margin
|
735
|
+
# :top 10px
|
737
736
|
#
|
738
737
|
# This will produce the following CSS output:
|
739
738
|
#
|
740
|
-
#
|
741
|
-
#
|
742
|
-
#
|
743
|
-
#
|
744
|
-
#
|
745
|
-
#
|
746
|
-
#
|
747
|
-
# }
|
739
|
+
# .page-title {
|
740
|
+
# font-family: Arial;
|
741
|
+
# font-size: 20px;
|
742
|
+
# font-weight: bold;
|
743
|
+
# color: #ff0000;
|
744
|
+
# padding: 4px;
|
745
|
+
# margin-top: 10px; }
|
748
746
|
#
|
749
747
|
# Any number of mixins may be defined and there is no limit on
|
750
748
|
# the number that can be included in a particular selector.
|
751
749
|
#
|
752
750
|
# Mixin definitions can also include references to other mixins.
|
753
|
-
#
|
751
|
+
# For example:
|
754
752
|
#
|
755
|
-
#
|
756
|
-
#
|
757
|
-
#
|
753
|
+
# =compound
|
754
|
+
# +highlighted-background
|
755
|
+
# +header-text
|
758
756
|
#
|
759
|
-
#
|
760
|
-
#
|
761
|
-
#
|
762
|
-
#
|
763
|
-
#
|
764
|
-
#
|
757
|
+
# =highlighted-background
|
758
|
+
# background:
|
759
|
+
# color: #fc0
|
760
|
+
# =header-text
|
761
|
+
# font:
|
762
|
+
# size: 20px
|
765
763
|
#
|
766
764
|
# Mixins that only define descendent selectors, can be safely mixed
|
767
765
|
# into the top most level of a document.
|
768
766
|
#
|
769
|
-
#
|
767
|
+
# ### Arguments
|
770
768
|
#
|
771
769
|
# Mixins can take arguments which can be used with SassScript:
|
772
770
|
#
|
773
|
-
#
|
774
|
-
#
|
775
|
-
#
|
776
|
-
#
|
777
|
-
#
|
778
|
-
#
|
779
|
-
#
|
771
|
+
# =sexy-border(!color)
|
772
|
+
# :border
|
773
|
+
# :color = !color
|
774
|
+
# :width 1in
|
775
|
+
# :style dashed
|
776
|
+
# p
|
777
|
+
# +sexy-border("blue")
|
780
778
|
#
|
781
779
|
# is compiled to:
|
782
780
|
#
|
783
|
-
#
|
784
|
-
#
|
785
|
-
#
|
786
|
-
#
|
781
|
+
# p {
|
782
|
+
# border-color: #0000ff;
|
783
|
+
# border-width: 1in;
|
784
|
+
# border-style: dashed; }
|
787
785
|
#
|
788
786
|
# Mixins can also specify default values for their arguments:
|
789
787
|
#
|
790
|
-
#
|
791
|
-
#
|
792
|
-
#
|
793
|
-
#
|
794
|
-
#
|
795
|
-
#
|
796
|
-
#
|
788
|
+
# =sexy-border(!color, !width = 1in)
|
789
|
+
# :border
|
790
|
+
# :color = !color
|
791
|
+
# :width = !width
|
792
|
+
# :style dashed
|
793
|
+
# p
|
794
|
+
# +sexy-border("blue")
|
797
795
|
#
|
798
796
|
# is compiled to:
|
799
797
|
#
|
800
|
-
#
|
801
|
-
#
|
802
|
-
#
|
803
|
-
#
|
798
|
+
# p {
|
799
|
+
# border-color: #0000ff;
|
800
|
+
# border-width: 1in;
|
801
|
+
# border-style: dashed; }
|
804
802
|
#
|
805
|
-
#
|
803
|
+
# ## Comments
|
806
804
|
#
|
807
|
-
#
|
805
|
+
# ### Silent Comments
|
808
806
|
#
|
809
807
|
# It's simple to add "silent" comments,
|
810
808
|
# which don't output anything to the CSS document,
|
811
809
|
# to a Sass document.
|
812
|
-
# Simply use the familiar C-style notation for a one-line comment,
|
810
|
+
# Simply use the familiar C-style notation for a one-line comment, `//`,
|
813
811
|
# at the normal indentation level and all text following it won't be output.
|
814
812
|
# For example:
|
815
813
|
#
|
816
|
-
#
|
817
|
-
#
|
818
|
-
#
|
819
|
-
#
|
814
|
+
# // A very awesome rule.
|
815
|
+
# #awesome.rule
|
816
|
+
# // An equally awesome attribute.
|
817
|
+
# :awesomeness very
|
820
818
|
#
|
821
819
|
# becomes
|
822
820
|
#
|
823
|
-
#
|
824
|
-
#
|
821
|
+
# #awesome.rule {
|
822
|
+
# awesomeness: very; }
|
825
823
|
#
|
826
824
|
# You can also nest text beneath a comment to comment out a whole block.
|
827
825
|
# For example:
|
828
826
|
#
|
829
|
-
#
|
830
|
-
#
|
831
|
-
#
|
832
|
-
#
|
833
|
-
#
|
834
|
-
#
|
827
|
+
# // A very awesome rule
|
828
|
+
# #awesome.rule
|
829
|
+
# // Don't use these attributes
|
830
|
+
# color: green
|
831
|
+
# font-size: 10em
|
832
|
+
# color: red
|
835
833
|
#
|
836
834
|
# becomes
|
837
835
|
#
|
838
|
-
#
|
839
|
-
#
|
836
|
+
# #awesome.rule {
|
837
|
+
# color: red; }
|
840
838
|
#
|
841
|
-
#
|
839
|
+
# ### Loud Comments
|
842
840
|
#
|
843
841
|
# "Loud" comments are just as easy as silent ones.
|
844
842
|
# These comments output to the document as CSS comments,
|
845
|
-
# and thus use the same opening sequence:
|
843
|
+
# and thus use the same opening sequence: `/*`.
|
846
844
|
# For example:
|
847
845
|
#
|
848
|
-
#
|
849
|
-
#
|
850
|
-
#
|
851
|
-
#
|
846
|
+
# /* A very awesome rule.
|
847
|
+
# #awesome.rule
|
848
|
+
# /* An equally awesome attribute.
|
849
|
+
# :awesomeness very
|
852
850
|
#
|
853
851
|
# becomes
|
854
852
|
#
|
855
|
-
#
|
856
|
-
#
|
857
|
-
#
|
858
|
-
#
|
853
|
+
# /* A very awesome rule. */
|
854
|
+
# #awesome.rule {
|
855
|
+
# /* An equally awesome attribute. */
|
856
|
+
# awesomeness: very; }
|
859
857
|
#
|
860
858
|
# You can also nest content beneath loud comments. For example:
|
861
859
|
#
|
862
|
-
#
|
863
|
-
#
|
864
|
-
#
|
865
|
-
#
|
866
|
-
#
|
867
|
-
#
|
868
|
-
#
|
860
|
+
# #pbj
|
861
|
+
# /* This rule describes
|
862
|
+
# the styling of the element
|
863
|
+
# that represents
|
864
|
+
# a peanut butter and jelly sandwich.
|
865
|
+
# :background-image url(/images/pbj.png)
|
866
|
+
# :color red
|
869
867
|
#
|
870
868
|
# becomes
|
871
869
|
#
|
872
|
-
#
|
873
|
-
#
|
874
|
-
#
|
875
|
-
#
|
876
|
-
#
|
877
|
-
#
|
878
|
-
#
|
870
|
+
# #pbj {
|
871
|
+
# /* This rule describes
|
872
|
+
# * the styling of the element
|
873
|
+
# * that represents
|
874
|
+
# * a peanut butter and jelly sandwich. */
|
875
|
+
# background-image: url(/images/pbj.png);
|
876
|
+
# color: red; }
|
879
877
|
#
|
880
|
-
#
|
878
|
+
# ## Output Style
|
881
879
|
#
|
882
880
|
# Although the default CSS style that Sass outputs is very nice,
|
883
881
|
# and reflects the structure of the document in a similar way that Sass does,
|
884
882
|
# sometimes it's good to have other formats available.
|
885
883
|
#
|
886
884
|
# Sass allows you to choose between three different output styles
|
887
|
-
# by setting the
|
888
|
-
# In Rails, this is done by setting
|
889
|
-
# outside Rails, it's done by passing an options hash with
|
885
|
+
# by setting the `:style` option.
|
886
|
+
# In Rails, this is done by setting `Sass::Plugin.options[:style]`;
|
887
|
+
# outside Rails, it's done by passing an options hash with `:style` set.
|
890
888
|
#
|
891
|
-
#
|
889
|
+
# ### `:nested`
|
892
890
|
#
|
893
891
|
# Nested style is the default Sass style,
|
894
892
|
# because it reflects the structure of the document
|
@@ -898,23 +896,23 @@ require 'haml/version'
|
|
898
896
|
# Each rule is indented based on how deeply it's nested.
|
899
897
|
# For example:
|
900
898
|
#
|
901
|
-
#
|
902
|
-
#
|
903
|
-
#
|
904
|
-
#
|
905
|
-
#
|
906
|
-
#
|
907
|
-
#
|
908
|
-
#
|
909
|
-
#
|
910
|
-
#
|
899
|
+
# #main {
|
900
|
+
# color: #fff;
|
901
|
+
# background-color: #000; }
|
902
|
+
# #main p {
|
903
|
+
# width: 10em; }
|
904
|
+
#
|
905
|
+
# .huge {
|
906
|
+
# font-size: 10em;
|
907
|
+
# font-weight: bold;
|
908
|
+
# text-decoration: underline; }
|
911
909
|
#
|
912
910
|
# Nested style is very useful when looking at large CSS files
|
913
911
|
# for the same reason Sass is useful for making them:
|
914
912
|
# it allows you to very easily grasp the structure of the file
|
915
913
|
# without actually reading anything.
|
916
914
|
#
|
917
|
-
#
|
915
|
+
# ### `:expanded`
|
918
916
|
#
|
919
917
|
# Expanded is the typical human-made CSS style,
|
920
918
|
# with each attribute and rule taking up one line.
|
@@ -922,21 +920,21 @@ require 'haml/version'
|
|
922
920
|
# but the rules aren't indented in any special way.
|
923
921
|
# For example:
|
924
922
|
#
|
925
|
-
#
|
926
|
-
#
|
927
|
-
#
|
928
|
-
#
|
929
|
-
#
|
930
|
-
#
|
931
|
-
#
|
923
|
+
# #main {
|
924
|
+
# color: #fff;
|
925
|
+
# background-color: #000;
|
926
|
+
# }
|
927
|
+
# #main p {
|
928
|
+
# width: 10em;
|
929
|
+
# }
|
932
930
|
#
|
933
|
-
#
|
934
|
-
#
|
935
|
-
#
|
936
|
-
#
|
937
|
-
#
|
931
|
+
# .huge {
|
932
|
+
# font-size: 10em;
|
933
|
+
# font-weight: bold;
|
934
|
+
# text-decoration: underline;
|
935
|
+
# }
|
938
936
|
#
|
939
|
-
#
|
937
|
+
# ### `:compact`
|
940
938
|
#
|
941
939
|
# Compact style, as the name would imply,
|
942
940
|
# takes up less space than Nested or Expanded.
|
@@ -947,12 +945,12 @@ require 'haml/version'
|
|
947
945
|
# while groups of rules have newlines between them.
|
948
946
|
# For example:
|
949
947
|
#
|
950
|
-
#
|
951
|
-
#
|
948
|
+
# #main { color: #fff; background-color: #000; }
|
949
|
+
# #main p { width: 10em; }
|
952
950
|
#
|
953
|
-
#
|
951
|
+
# .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
|
954
952
|
#
|
955
|
-
#
|
953
|
+
# ### `:compressed`
|
956
954
|
#
|
957
955
|
# Compressed style takes up the minimum amount of space possible,
|
958
956
|
# having no whitespace except that necessary to separate selectors
|
@@ -960,109 +958,121 @@ require 'haml/version'
|
|
960
958
|
# It's not meant to be human-readable.
|
961
959
|
# For example:
|
962
960
|
#
|
963
|
-
#
|
961
|
+
# #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
|
964
962
|
#
|
965
|
-
#
|
963
|
+
# ## Sass Options
|
966
964
|
#
|
967
|
-
# Options can be set by setting the
|
968
|
-
# in
|
965
|
+
# Options can be set by setting the {Sass::Plugin.options} hash
|
966
|
+
# in `environment.rb` in Rails...
|
969
967
|
#
|
970
|
-
#
|
968
|
+
# Sass::Plugin.options[:style] = :compact
|
971
969
|
#
|
972
|
-
# ...or by setting the
|
970
|
+
# ...or by setting the `Merb::Plugin.config[:sass]` hash in `init.rb` in Merb...
|
973
971
|
#
|
974
|
-
#
|
972
|
+
# Merb::Plugin.config[:sass][:style] = :compact
|
975
973
|
#
|
976
|
-
# ...or by passing an options hash to Sass::Engine.
|
974
|
+
# ...or by passing an options hash to {Sass::Engine#initialize}.
|
977
975
|
# Available options are:
|
978
976
|
#
|
979
|
-
#
|
980
|
-
#
|
981
|
-
#
|
982
|
-
#
|
983
|
-
#
|
984
|
-
#
|
985
|
-
#
|
986
|
-
#
|
987
|
-
#
|
988
|
-
#
|
989
|
-
#
|
990
|
-
#
|
991
|
-
#
|
992
|
-
#
|
993
|
-
#
|
994
|
-
#
|
995
|
-
#
|
996
|
-
#
|
997
|
-
#
|
998
|
-
#
|
999
|
-
#
|
1000
|
-
#
|
1001
|
-
#
|
1002
|
-
#
|
1003
|
-
#
|
1004
|
-
#
|
1005
|
-
#
|
1006
|
-
#
|
1007
|
-
#
|
1008
|
-
#
|
1009
|
-
#
|
1010
|
-
#
|
1011
|
-
#
|
1012
|
-
#
|
1013
|
-
#
|
1014
|
-
#
|
1015
|
-
#
|
1016
|
-
#
|
1017
|
-
#
|
1018
|
-
#
|
1019
|
-
#
|
1020
|
-
#
|
1021
|
-
#
|
1022
|
-
#
|
1023
|
-
#
|
1024
|
-
#
|
1025
|
-
#
|
1026
|
-
#
|
1027
|
-
#
|
1028
|
-
#
|
1029
|
-
#
|
1030
|
-
#
|
1031
|
-
#
|
1032
|
-
#
|
1033
|
-
#
|
1034
|
-
#
|
1035
|
-
#
|
1036
|
-
#
|
1037
|
-
#
|
1038
|
-
#
|
1039
|
-
#
|
1040
|
-
#
|
1041
|
-
#
|
1042
|
-
#
|
1043
|
-
#
|
1044
|
-
#
|
1045
|
-
#
|
1046
|
-
#
|
1047
|
-
#
|
1048
|
-
#
|
1049
|
-
#
|
1050
|
-
#
|
1051
|
-
#
|
1052
|
-
#
|
1053
|
-
#
|
1054
|
-
#
|
1055
|
-
#
|
1056
|
-
#
|
1057
|
-
#
|
1058
|
-
#
|
977
|
+
# {#style-option} `:style`
|
978
|
+
# : Sets the style of the CSS output.
|
979
|
+
# See the section on Output Style, above.
|
980
|
+
#
|
981
|
+
# {#attribute_syntax-option} `:attribute_syntax`
|
982
|
+
# : Forces the document to use one syntax for attributes.
|
983
|
+
# If the correct syntax isn't used, an error is thrown.
|
984
|
+
# `:normal` forces the use of a colon
|
985
|
+
# before the attribute name.
|
986
|
+
# For example: `:color #0f3`
|
987
|
+
# or `:width = !main_width`.
|
988
|
+
# `:alternate` forces the use of a colon or equals sign
|
989
|
+
# after the attribute name.
|
990
|
+
# For example: `color: #0f3`
|
991
|
+
# or `width = !main_width`.
|
992
|
+
# By default, either syntax is valid.
|
993
|
+
#
|
994
|
+
# {#cache-option} `cache`
|
995
|
+
# : Whether parsed Sass files should be cached,
|
996
|
+
# allowing greater speed. Defaults to true.
|
997
|
+
#
|
998
|
+
# {#never_update-option} `:never_update`
|
999
|
+
# : Whether the CSS files should never be updated,
|
1000
|
+
# even if the template file changes.
|
1001
|
+
# Setting this to true may give small performance gains.
|
1002
|
+
# It always defaults to false.
|
1003
|
+
# Only has meaning within Ruby on Rails or Merb.
|
1004
|
+
#
|
1005
|
+
# {#always_update-option} `:always_update`
|
1006
|
+
# : Whether the CSS files should be updated every
|
1007
|
+
# time a controller is accessed,
|
1008
|
+
# as opposed to only when the template has been modified.
|
1009
|
+
# Defaults to false.
|
1010
|
+
# Only has meaning within Ruby on Rails or Merb.
|
1011
|
+
#
|
1012
|
+
# {#always_check-option} `:always_check`
|
1013
|
+
# : Whether a Sass template should be checked for updates every
|
1014
|
+
# time a controller is accessed,
|
1015
|
+
# as opposed to only when the Rails server starts.
|
1016
|
+
# If a Sass template has been updated,
|
1017
|
+
# it will be recompiled and will overwrite the corresponding CSS file.
|
1018
|
+
# Defaults to false in production mode, true otherwise.
|
1019
|
+
# Only has meaning within Ruby on Rails or Merb.
|
1020
|
+
#
|
1021
|
+
# {#full_exception-option} `:full_exception`
|
1022
|
+
# : Whether an error in the Sass code
|
1023
|
+
# should cause Sass to provide a detailed description.
|
1024
|
+
# If set to true, the specific error will be displayed
|
1025
|
+
# along with a line number and source snippet.
|
1026
|
+
# Otherwise, a simple uninformative error message will be displayed.
|
1027
|
+
# Defaults to false in production mode, true otherwise.
|
1028
|
+
# Only has meaning within Ruby on Rails or Merb.
|
1029
|
+
#
|
1030
|
+
# {#template-location-option} `:template_location`
|
1031
|
+
# : A path to the root sass template directory for you application.
|
1032
|
+
# If a hash, `:css_location` is ignored and this option designates
|
1033
|
+
# both a mapping between input and output directories.
|
1034
|
+
# May also be given a list of 2-element lists, instead of a hash.
|
1035
|
+
# Defaults to `RAILS_ROOT + "/public/stylesheets/sass"`
|
1036
|
+
# or `MERB_ROOT + "/public/stylesheets/sass"`.
|
1037
|
+
# Only has meaning within Ruby on Rails or Merb.
|
1038
|
+
# This will be derived from the `:css_location` path list if not provided
|
1039
|
+
# by appending a folder of "sass" to each corresponding css location.
|
1040
|
+
#
|
1041
|
+
# {#css-location-option} `:css_location`
|
1042
|
+
# : The path where CSS output should be written to.
|
1043
|
+
# This option is ignored when `:template_location` is a Hash.
|
1044
|
+
# Defaults to `RAILS_ROOT + "/public/stylesheets"`
|
1045
|
+
# or `MERB_ROOT + "/public/stylesheets"`.
|
1046
|
+
# Only has meaning within Ruby on Rails or Merb.
|
1047
|
+
#
|
1048
|
+
# {#cache_location-option} `:cache_location`
|
1049
|
+
# : The path where the cached `sassc` files should be written to.
|
1050
|
+
# Defaults to `RAILS_ROOT + "/tmp/sass-cache"`,
|
1051
|
+
# or `MERB_ROOT + "/tmp/sass-cache"`,
|
1052
|
+
# or just `"./.sass-cache"`.
|
1053
|
+
#
|
1054
|
+
# {#filename-option} `:filename`
|
1055
|
+
# : The filename of the file being rendered.
|
1056
|
+
# This is used solely for reporting errors,
|
1057
|
+
# and is automatically set when using Rails or Merb.
|
1058
|
+
#
|
1059
|
+
# {#load_paths-option} `:load_paths`
|
1060
|
+
# : An array of filesystem paths which should be searched
|
1061
|
+
# for Sass templates imported with the "@import" directive.
|
1062
|
+
# This defaults to the working directory and, in Rails or Merb,
|
1063
|
+
# whatever `:template_location` is.
|
1064
|
+
#
|
1065
|
+
# {#line_numbers-option} `:line_numbers`
|
1066
|
+
# : When set to true, causes the line number and file
|
1067
|
+
# where a selector is defined to be emitted into the compiled CSS
|
1068
|
+
# as a comment. Useful for debugging especially when using imports
|
1069
|
+
# and mixins.
|
1059
1070
|
module Sass
|
1060
1071
|
extend Haml::Version
|
1061
1072
|
|
1062
1073
|
# A string representing the version of Sass.
|
1063
|
-
# A more fine-grained representation is available from Sass.version.
|
1074
|
+
# A more fine-grained representation is available from {Sass.version}.
|
1064
1075
|
VERSION = version[:string] unless defined?(Sass::VERSION)
|
1065
|
-
|
1066
1076
|
end
|
1067
1077
|
|
1068
1078
|
require 'haml/util'
|