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.
Files changed (61) hide show
  1. data/EDGE_GEM_VERSION +1 -1
  2. data/FAQ.md +142 -0
  3. data/{README.rdoc → README.md} +141 -141
  4. data/Rakefile +29 -17
  5. data/VERSION +1 -1
  6. data/lib/haml/buffer.rb +63 -27
  7. data/lib/haml/engine.rb +103 -80
  8. data/lib/haml/error.rb +7 -7
  9. data/lib/haml/exec.rb +80 -26
  10. data/lib/haml/filters.rb +106 -40
  11. data/lib/haml/helpers/action_view_extensions.rb +34 -39
  12. data/lib/haml/helpers/action_view_mods.rb +132 -139
  13. data/lib/haml/helpers.rb +207 -153
  14. data/lib/haml/html.rb +40 -21
  15. data/lib/haml/precompiler.rb +2 -0
  16. data/lib/haml/shared.rb +34 -3
  17. data/lib/haml/template/patch.rb +1 -1
  18. data/lib/haml/template/plugin.rb +0 -2
  19. data/lib/haml/template.rb +5 -0
  20. data/lib/haml/util.rb +136 -1
  21. data/lib/haml/version.rb +16 -4
  22. data/lib/haml.rb +502 -481
  23. data/lib/sass/css.rb +106 -68
  24. data/lib/sass/engine.rb +55 -22
  25. data/lib/sass/environment.rb +52 -21
  26. data/lib/sass/error.rb +23 -12
  27. data/lib/sass/files.rb +27 -0
  28. data/lib/sass/plugin/merb.rb +2 -2
  29. data/lib/sass/plugin/rails.rb +0 -2
  30. data/lib/sass/plugin.rb +32 -23
  31. data/lib/sass/repl.rb +7 -0
  32. data/lib/sass/script/bool.rb +9 -5
  33. data/lib/sass/script/color.rb +87 -1
  34. data/lib/sass/script/funcall.rb +23 -2
  35. data/lib/sass/script/functions.rb +93 -44
  36. data/lib/sass/script/lexer.rb +33 -3
  37. data/lib/sass/script/literal.rb +93 -1
  38. data/lib/sass/script/node.rb +14 -0
  39. data/lib/sass/script/number.rb +128 -4
  40. data/lib/sass/script/operation.rb +16 -1
  41. data/lib/sass/script/parser.rb +51 -21
  42. data/lib/sass/script/string.rb +7 -4
  43. data/lib/sass/script/unary_operation.rb +14 -1
  44. data/lib/sass/script/variable.rb +12 -1
  45. data/lib/sass/script.rb +26 -5
  46. data/lib/sass/tree/attr_node.rb +46 -9
  47. data/lib/sass/tree/comment_node.rb +41 -1
  48. data/lib/sass/tree/debug_node.rb +8 -0
  49. data/lib/sass/tree/directive_node.rb +20 -0
  50. data/lib/sass/tree/file_node.rb +12 -0
  51. data/lib/sass/tree/for_node.rb +15 -0
  52. data/lib/sass/tree/if_node.rb +22 -0
  53. data/lib/sass/tree/mixin_def_node.rb +12 -1
  54. data/lib/sass/tree/mixin_node.rb +13 -0
  55. data/lib/sass/tree/node.rb +136 -6
  56. data/lib/sass/tree/rule_node.rb +66 -7
  57. data/lib/sass/tree/variable_node.rb +10 -0
  58. data/lib/sass/tree/while_node.rb +11 -1
  59. data/lib/sass.rb +544 -534
  60. metadata +7 -6
  61. 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
- # = Sass (Syntactically Awesome StyleSheets)
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
- # == Features
16
+ # ## Features
17
17
  #
18
18
  # * Whitespace active
19
19
  # * Well-formatted output
20
20
  # * Elegant input
21
21
  # * Feature-rich
22
22
  #
23
- # == Using Sass
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
- # gem install haml
34
+ # gem install haml
35
35
  #
36
36
  # To enable it as a Rails plugin,
37
37
  # then run
38
38
  #
39
- # haml --rails path/to/rails/app
39
+ # haml --rails path/to/rails/app
40
40
  #
41
41
  # To enable Sass in Merb,
42
42
  # add
43
43
  #
44
- # dependency "merb-haml"
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
- # sass input.sass output.css
58
+ # sass input.sass output.css
59
59
  #
60
- # Use <tt>sass --help</tt> for full documentation.
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 <tt>require "sass"</tt>
64
+ # you can use it by running `require "sass"`
65
65
  # and using Sass::Engine like so:
66
66
  #
67
- # engine = Sass::Engine.new("#main\n :background-color #0000ff")
68
- # engine.render #=> "#main { background-color: #0000ff; }\n"
67
+ # engine = Sass::Engine.new("#main\n :background-color #0000ff")
68
+ # engine.render #=> "#main { background-color: #0000ff; }\n"
69
69
  #
70
- # == CSS Rules
70
+ # ## CSS Rules
71
71
  #
72
72
  # Rules in flat CSS have two elements:
73
73
  # the selector
74
- # (e.g. "#main", "div p", "li a:hover")
74
+ # (e.g. `#main`, `div p`, `li a:hover`)
75
75
  # and the attributes
76
- # (e.g. "color: #00ff00;", "width: 5em;").
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
- # === Rules and Selectors
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
- # #main p
90
- # <attribute>
91
- # <attribute>
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
- # .users #userTab,
100
- # .posts #postsTab
101
- # <attributes>
99
+ # .users #userTab,
100
+ # .posts #postsTab
101
+ # <attributes>
102
102
  #
103
- # === Attributes
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
- # #main p
113
- # color: #00ff00
114
- # width: 97%
112
+ # #main p
113
+ # color: #00ff00
114
+ # width: 97%
115
115
  #
116
116
  # is compiled to:
117
117
  #
118
- # #main p {
119
- # color: #00ff00;
120
- # width: 97% }
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
- # #main p
129
- # :color #00ff00
130
- # :width 97%
128
+ # #main p
129
+ # :color #00ff00
130
+ # :width 97%
131
131
  #
132
132
  # is compiled to:
133
133
  #
134
- # #main p {
135
- # color: #00ff00;
136
- # width: 97% }
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 <tt>:attribute_syntax</tt> option below.
140
+ # see the `:attribute_syntax` option below.
141
141
  #
142
- # === Nested Rules
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
- # #main p
149
- # :color #00ff00
150
- # :width 97%
148
+ # #main p
149
+ # :color #00ff00
150
+ # :width 97%
151
151
  #
152
- # .redbox
153
- # :background-color #ff0000
154
- # :color #000000
152
+ # .redbox
153
+ # :background-color #ff0000
154
+ # :color #000000
155
155
  #
156
156
  # is compiled to:
157
157
  #
158
- # #main p {
159
- # color: #00ff00;
160
- # width: 97%; }
161
- # #main p .redbox {
162
- # background-color: #ff0000;
163
- # color: #000000; }
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
- # #main
168
- # :width 97%
167
+ # #main
168
+ # :width 97%
169
169
  #
170
- # p, div
171
- # :font-size 2em
172
- # a
173
- # :font-weight bold
170
+ # p, div
171
+ # :font-size 2em
172
+ # a
173
+ # :font-weight bold
174
174
  #
175
- # pre
176
- # :font-size 3em
175
+ # pre
176
+ # :font-size 3em
177
177
  #
178
178
  # is compiled to:
179
179
  #
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; }
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
- # === Referencing Parent Rules
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, "#main" is the parent of "p"),
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 "&" in your selectors.
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
- # a
202
- # :font-weight bold
203
- # :text-decoration none
204
- # &:hover
205
- # :text-decoration underline
206
- # &:visited
207
- # :font-weight normal
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
- # a {
212
- # font-weight: bold;
213
- # text-decoration: none; }
214
- # a:hover {
215
- # text-decoration: underline; }
216
- # a:visited {
217
- # font-weight: normal; }
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
- # #main
223
- # :width 90%
224
- # #sidebar
225
- # :float left
226
- # :margin-left 20%
227
- # .ie6 &
228
- # :margin-left 40%
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
- # #main {
233
- # width: 90%; }
234
- # #main #sidebar {
235
- # float: left;
236
- # margin-left: 20%; }
237
- # .ie6 #main #sidebar {
238
- # margin-left: 40%; }
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
- # === Attribute Namespaces
240
+ # ### Attribute Namespaces
241
241
  #
242
242
  # CSS has quite a few attributes that are in "namespaces;"
243
- # for instance, "font-family," "font-size," and "font-weight"
244
- # are all in the "font" namespace.
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
- # .funky
253
- # :font
254
- # :family fantasy
255
- # :size 30em
256
- # :weight bold
252
+ # .funky
253
+ # :font
254
+ # :family fantasy
255
+ # :size 30em
256
+ # :weight bold
257
257
  #
258
258
  # is compiled to:
259
259
  #
260
- # .funky {
261
- # font-family: fantasy;
262
- # font-size: 30em;
263
- # font-weight: bold; }
260
+ # .funky {
261
+ # font-family: fantasy;
262
+ # font-size: 30em;
263
+ # font-weight: bold; }
264
264
  #
265
- # === Rule Escaping
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 (<tt>\</tt>).
269
+ # you can escape it with a backslash (`\`).
270
270
  # For example:
271
271
  #
272
- # #main
273
- # \+div
274
- # clear: both
272
+ # #main
273
+ # \+div
274
+ # clear: both
275
275
  #
276
276
  # is compiled to:
277
277
  #
278
- # #main +div {
279
- # clear: both; }
278
+ # #main +div {
279
+ # clear: both; }
280
280
  #
281
- # == Directives
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, "<tt>@</tt>",
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
- # @import red.sass
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
- # === import
296
+ # ### `@import`
297
297
  #
298
- # The "@import" directive works in a very similar way to the CSS import directive,
299
- # and sometimes compiles to a literal CSS "@import".
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 :load_paths option (see below).
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 "@import" directive to tell the client program
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
- # @import foo.sass
324
+ # @import foo.sass
325
325
  #
326
326
  # would compile to
327
327
  #
328
- # .foo
329
- # :color #f00
328
+ # .foo
329
+ # :color #f00
330
330
  #
331
331
  # whereas
332
332
  #
333
- # @import foo.css
333
+ # @import foo.css
334
334
  #
335
335
  # would compile to
336
336
  #
337
- # @import foo.css
337
+ # @import foo.css
338
338
  #
339
339
  # Finally,
340
340
  #
341
- # @import foo
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
- # === @debug
346
+ # ### `@debug`
347
347
  #
348
- # The "@debug" directive prints the value of a SassScript expression
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
- # @debug 10em + 12em
354
+ # @debug 10em + 12em
355
355
  #
356
356
  # outputs:
357
357
  #
358
- # Line 1 DEBUG: 22em
358
+ # Line 1 DEBUG: 22em
359
359
  #
360
- # === @font-face, @media, etc.
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
- # @font-face
366
- # font-family: "Bitstream Vera Sans"
367
- # src: url(http://foo.bar/bvs")
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
- # @font-face {
372
- # font-family: "Bitstream Vera Sans";
373
- # src: url(http://foo.bar/bvs"); }
371
+ # @font-face {
372
+ # font-family: "Bitstream Vera Sans";
373
+ # src: url(http://foo.bar/bvs"); }
374
374
  #
375
375
  # and
376
376
  #
377
- # @media print
378
- # #sidebar
379
- # display: none
377
+ # @media print
378
+ # #sidebar
379
+ # display: none
380
380
  #
381
- # #main
382
- # background-color: white
381
+ # #main
382
+ # background-color: white
383
383
  #
384
384
  # compiles to:
385
385
  #
386
- # @media print {
387
- # #sidebar {
388
- # display: none; }
386
+ # @media print {
387
+ # #sidebar {
388
+ # display: none; }
389
389
  #
390
- # #main {
391
- # background-color: white; }
392
- # }
390
+ # #main {
391
+ # background-color: white; } }
393
392
  #
394
- # == SassScript
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
- # === Interactive Shell
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 -i option. At 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
- # $ sass -i
409
- # >> "Hello, Sassy World!"
410
- # "Hello, Sassy World!"
411
- # >> 1px + 1px + 1px
412
- # 3px
413
- # >> #777 + #777
414
- # #eeeeee
415
- # >> #777 + #888
416
- # white
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
- # === Variables
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
- # !width = 5em
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
- # #main
431
- # :width = !width
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
- # === Data Types
435
+ # ### Data Types
437
436
  #
438
437
  # SassScript supports four data types:
439
- # * numbers (e.g. <tt>1.2</tt>, <tt>13</tt>, <tt>10px</tt>)
440
- # * strings of text (e.g. <tt>"foo"</tt>, <tt>"bar"</tt>)
441
- # * colors (e.g. +blue+, <tt>##04a3f9</tt>)
442
- # * booleans (e.g. +true+, +false+)
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
- # p
448
- # !width = 5em
449
- # // This will cause an error
450
- # :border = !width solid blue
451
- # // Use one of the following forms instead:
452
- # :border = "#{!width} solid blue"
453
- # :border = !width "solid" "blue"
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
- # p {
458
- # border: 5em solid blue;
459
- # border: 5em solid blue; }
456
+ # p {
457
+ # border: 5em solid blue;
458
+ # border: 5em solid blue; }
460
459
  #
461
460
  #
462
- # === Operations
461
+ # ### Operations
463
462
  #
464
463
  # SassScript supports the standard arithmetic operations on numbers
465
- # (<tt>+</tt>, <tt>-</tt>, <tt>*</tt>, <tt>/</tt>, <tt>%</tt>),
464
+ # (`+`, `-`, `*`, `/`, `%`),
466
465
  # and will automatically convert between units if it can:
467
466
  #
468
- # p
469
- # :width = 1in + 8pt
467
+ # p
468
+ # :width = 1in + 8pt
470
469
  #
471
470
  # is compiled to:
472
471
  #
473
- # p {
474
- # width: 1.111in; }
472
+ # p {
473
+ # width: 1.111in; }
475
474
  #
476
475
  # Relational operators
477
- # (<tt><</tt>, <tt>></tt>, <tt><=</tt>, <tt>>=</tt>)
476
+ # (`<`, `>`, `<=`, `>=`)
478
477
  # are also supported for numbers,
479
478
  # and equality operators
480
- # (<tt>==</tt>, <tt>!=</tt>)
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
- # p
487
- # :color = #010203 + #040506
485
+ # p
486
+ # :color = #010203 + #040506
488
487
  #
489
488
  # is compiled to:
490
489
  #
491
- # p {
492
- # color: #050709; }
490
+ # p {
491
+ # color: #050709; }
493
492
  #
494
493
  # Some arithmetic operations even work between numbers and colors:
495
494
  #
496
- # p
497
- # :color = #010203 * 2
495
+ # p
496
+ # :color = #010203 * 2
498
497
  #
499
498
  # is compiled to:
500
499
  #
501
- # p {
502
- # color: #020406; }
500
+ # p {
501
+ # color: #020406; }
503
502
  #
504
- # The <tt>+</tt> operation can be used to concatenate strings:
503
+ # The `+` operation can be used to concatenate strings:
505
504
  #
506
- # p
507
- # :cursor = "e" + "-resize"
505
+ # p
506
+ # :cursor = "e" + "-resize"
508
507
  #
509
508
  # is compiled to:
510
509
  #
511
- # p {
512
- # cursor: e-resize; }
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
- # p
518
- # :border = "#{5px + 10pt} solid #ccc"
516
+ # p
517
+ # :border = "#{5px + 10pt} solid #ccc"
519
518
  #
520
- # Finally, SassScript supports +and+, +or+, and +not+ operators
519
+ # Finally, SassScript supports `and`, `or`, and `not` operators
521
520
  # for boolean values.
522
521
  #
523
- # === Parentheses
522
+ # ### Parentheses
524
523
  #
525
524
  # Parentheses can be used to affect the order of operations:
526
525
  #
527
- # p
528
- # :width = 1em + (2em * 3)
526
+ # p
527
+ # :width = 1em + (2em * 3)
529
528
  #
530
529
  # is compiled to:
531
530
  #
532
- # p {
533
- # width: 7em; }
531
+ # p {
532
+ # width: 7em; }
534
533
  #
535
- # === Functions
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
- # p
541
- # :color = hsl(0, 100%, 50%)
539
+ # p
540
+ # :color = hsl(0, 100%, 50%)
542
541
  #
543
542
  # is compiled to:
544
543
  #
545
- # #main {
546
- # color: #ff0000; }
544
+ # #main {
545
+ # color: #ff0000; }
547
546
  #
548
- # The following functions are provided: +hsl+, +percentage+, +round+, +ceil+, +floor+, and +abs+.
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
- # === Interpolation
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
- # !name = foo
559
- # !attr = border
560
- # p.#{!name}
561
- # #{attr}-color: blue
557
+ # !name = foo
558
+ # !attr = border
559
+ # p.#{!name}
560
+ # #{attr}-color: blue
562
561
  #
563
562
  # is compiled to:
564
563
  #
565
- # p.foo {
566
- # border-color: blue; }
564
+ # p.foo {
565
+ # border-color: blue; }
567
566
  #
568
- # === Optional Assignment
567
+ # ### Optional Assignment
569
568
  #
570
569
  # You can assign to variables if they aren't already assigned
571
- # using the ||= assignment operator. This means that if 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
- # !content = "First content"
578
- # !content ||= "Second content?"
579
- # !new_content ||= "First time reference"
576
+ # !content = "First content"
577
+ # !content ||= "Second content?"
578
+ # !new_content ||= "First time reference"
580
579
  #
581
- # #main
582
- # content = !content
583
- # new-content = !new_content
580
+ # #main
581
+ # content = !content
582
+ # new-content = !new_content
584
583
  #
585
584
  # is compiled to:
586
585
  #
587
- # #main {
588
- # content: First content;
589
- # new-content: First time reference; }
586
+ # #main {
587
+ # content: First content;
588
+ # new-content: First time reference; }
590
589
  #
591
- # == Control Structures
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
- # === if
595
+ # ### `@if`
597
596
  #
598
- # The "@if" statement takes a SassScript expression
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 +false+:
599
+ # anything other than `false`:
601
600
  #
602
- # p
603
- # @if 1 + 1 == 2
604
- # :border 1px solid
605
- # @if 5 < 3
606
- # :border 2px dotted
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
- # p {
611
- # border: 1px solid; }
609
+ # p {
610
+ # border: 1px solid; }
612
611
  #
613
- # The "@if" statement can be followed by several "@else if" statements
614
- # and one "@else" statement.
615
- # If the "@if" statement fails,
616
- # the "@else if" statements are tried in order
617
- # until one succeeds or the "@else" is reached.
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
- # !type = "monster"
621
- # p
622
- # @if !type == "ocean"
623
- # :color blue
624
- # @else if !type == "matador"
625
- # :color red
626
- # @else if !type == "monster"
627
- # :color green
628
- # @else
629
- # :color black
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
- # p {
634
- # color: green; }
632
+ # p {
633
+ # color: green; }
635
634
  #
636
- # === for
635
+ # ### `@for`
637
636
  #
638
- # The "@for" statement has two forms:
639
- # "@for <var> from <start> to <end>" or
640
- # "@for <var> from <start> through <end>".
641
- # <var> is a variable name, like <tt>!i</tt>,
642
- # and <start> and <end> are SassScript expressions
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 "@for" statement sets <var> to each number
646
- # from <start> to <end>,
647
- # including <end> if "through" is used.
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
- # @for !i from 1 through 3
651
- # .item-#{!i}
652
- # :width = 2em * !i
649
+ # @for !i from 1 through 3
650
+ # .item-#{!i}
651
+ # :width = 2em * !i
653
652
  #
654
653
  # is compiled to:
655
654
  #
656
- # .item-1 {
657
- # width: 2em; }
658
- # .item-2 {
659
- # width: 4em; }
660
- # .item-3 {
661
- # width: 6em; }
655
+ # .item-1 {
656
+ # width: 2em; }
657
+ # .item-2 {
658
+ # width: 4em; }
659
+ # .item-3 {
660
+ # width: 6em; }
662
661
  #
663
- # === while
662
+ # ### `@while`
664
663
  #
665
- # The "@while" statement repeatedly loops over the nested
666
- # block until the statement evaluates to false. This can
667
- # be used to achieve more complex looping than the @for
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
- # !i = 6
671
- # @while !i > 0
672
- # .item-#{!i}
673
- # :width = 2em * !i
674
- # !i = !i - 2
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
- # .item-6 {
679
- # width: 12em; }
678
+ # .item-6 {
679
+ # width: 12em; }
680
680
  #
681
- # .item-4 {
682
- # width: 8em; }
681
+ # .item-4 {
682
+ # width: 8em; }
683
683
  #
684
- # .item-2 {
685
- # width: 4em; }
684
+ # .item-2 {
685
+ # width: 4em; }
686
686
  #
687
- # == Mixins
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
- # === Defining a Mixin
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 'large-text' mixin is defined as follows:
698
+ # For example the `large-text` mixin is defined as follows:
699
699
  #
700
- # =large-text
701
- # :font
702
- # :family Arial
703
- # :size 20px
704
- # :weight bold
705
- # :color #ff0000
700
+ # =large-text
701
+ # :font
702
+ # :family Arial
703
+ # :size 20px
704
+ # :weight bold
705
+ # :color #ff0000
706
706
  #
707
- # The initial '=' marks this as a mixin rather than a standard selector.
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. e.g.
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
- # === Mixing it in
724
+ # ### Mixing it in
725
725
  #
726
726
  # Inlining a defined mixin is simple,
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:
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
- # .page-title {
741
- # font-family: Arial;
742
- # font-size: 20px;
743
- # font-weight: bold;
744
- # color: #ff0000;
745
- # padding: 4px;
746
- # margin-top: 10px;
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
- # E.g.
751
+ # For example:
754
752
  #
755
- # =compound
756
- # +highlighted-background
757
- # +header-text
753
+ # =compound
754
+ # +highlighted-background
755
+ # +header-text
758
756
  #
759
- # =highlighted-background
760
- # background:
761
- # color: #fc0
762
- # =header-text
763
- # font:
764
- # size: 20px
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
- # === Arguments
767
+ # ### Arguments
770
768
  #
771
769
  # Mixins can take arguments which can be used with SassScript:
772
770
  #
773
- # =sexy-border(!color)
774
- # :border
775
- # :color = !color
776
- # :width 1in
777
- # :style dashed
778
- # p
779
- # +sexy-border("blue")
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
- # p {
784
- # border-color: #0000ff;
785
- # border-width: 1in;
786
- # border-style: dashed; }
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
- # =sexy-border(!color, !width = 1in)
791
- # :border
792
- # :color = !color
793
- # :width = !width
794
- # :style dashed
795
- # p
796
- # +sexy-border("blue")
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
- # p {
801
- # border-color: #0000ff;
802
- # border-width: 1in;
803
- # border-style: dashed; }
798
+ # p {
799
+ # border-color: #0000ff;
800
+ # border-width: 1in;
801
+ # border-style: dashed; }
804
802
  #
805
- # == Comments
803
+ # ## Comments
806
804
  #
807
- # === Silent Comments
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
- # // A very awesome rule.
817
- # #awesome.rule
818
- # // An equally awesome attribute.
819
- # :awesomeness very
814
+ # // A very awesome rule.
815
+ # #awesome.rule
816
+ # // An equally awesome attribute.
817
+ # :awesomeness very
820
818
  #
821
819
  # becomes
822
820
  #
823
- # #awesome.rule {
824
- # awesomeness: very; }
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
- # // A very awesome rule
830
- # #awesome.rule
831
- # // Don't use these attributes
832
- # color: green
833
- # font-size: 10em
834
- # color: red
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
- # #awesome.rule {
839
- # color: red; }
836
+ # #awesome.rule {
837
+ # color: red; }
840
838
  #
841
- # === Loud Comments
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
- # /* A very awesome rule.
849
- # #awesome.rule
850
- # /* An equally awesome attribute.
851
- # :awesomeness very
846
+ # /* A very awesome rule.
847
+ # #awesome.rule
848
+ # /* An equally awesome attribute.
849
+ # :awesomeness very
852
850
  #
853
851
  # becomes
854
852
  #
855
- # /* A very awesome rule. */
856
- # #awesome.rule {
857
- # /* An equally awesome attribute. */
858
- # awesomeness: very; }
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
- # #pbj
863
- # /* This rule describes
864
- # the styling of the element
865
- # that represents
866
- # a peanut butter and jelly sandwich.
867
- # :background-image url(/images/pbj.png)
868
- # :color red
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
- # #pbj {
873
- # /* This rule describes
874
- # * the styling of the element
875
- # * that represents
876
- # * a peanut butter and jelly sandwich. */
877
- # background-image: url(/images/pbj.png);
878
- # color: red; }
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
- # == Output Style
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 <tt>:style</tt> option.
888
- # In Rails, this is done by setting <tt>Sass::Plugin.options[:style]</tt>;
889
- # outside Rails, it's done by passing an options hash with </tt>:style</tt> set.
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
- # === <tt>:nested</tt>
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
- # #main {
902
- # color: #fff;
903
- # background-color: #000; }
904
- # #main p {
905
- # width: 10em; }
906
- #
907
- # .huge {
908
- # font-size: 10em;
909
- # font-weight: bold;
910
- # text-decoration: underline; }
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
- # === <tt>:expanded</tt>
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
- # #main {
926
- # color: #fff;
927
- # background-color: #000;
928
- # }
929
- # #main p {
930
- # width: 10em;
931
- # }
923
+ # #main {
924
+ # color: #fff;
925
+ # background-color: #000;
926
+ # }
927
+ # #main p {
928
+ # width: 10em;
929
+ # }
932
930
  #
933
- # .huge {
934
- # font-size: 10em;
935
- # font-weight: bold;
936
- # text-decoration: underline;
937
- # }
931
+ # .huge {
932
+ # font-size: 10em;
933
+ # font-weight: bold;
934
+ # text-decoration: underline;
935
+ # }
938
936
  #
939
- # === <tt>:compact</tt>
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
- # #main { color: #fff; background-color: #000; }
951
- # #main p { width: 10em; }
948
+ # #main { color: #fff; background-color: #000; }
949
+ # #main p { width: 10em; }
952
950
  #
953
- # .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
951
+ # .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
954
952
  #
955
- # === <tt>:compressed</tt>
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
- # #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
961
+ # #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
964
962
  #
965
- # == Sass Options
963
+ # ## Sass Options
966
964
  #
967
- # Options can be set by setting the <tt>Sass::Plugin.options</tt> hash
968
- # in <tt>environment.rb</tt> in Rails...
965
+ # Options can be set by setting the {Sass::Plugin.options} hash
966
+ # in `environment.rb` in Rails...
969
967
  #
970
- # Sass::Plugin.options[:style] = :compact
968
+ # Sass::Plugin.options[:style] = :compact
971
969
  #
972
- # ...or by setting the <tt>Merb::Plugin.config[:sass]</tt> hash in <tt>init.rb</tt> in Merb...
970
+ # ...or by setting the `Merb::Plugin.config[:sass]` hash in `init.rb` in Merb...
973
971
  #
974
- # Merb::Plugin.config[:sass][:style] = :compact
972
+ # Merb::Plugin.config[:sass][:style] = :compact
975
973
  #
976
- # ...or by passing an options hash to Sass::Engine.new.
974
+ # ...or by passing an options hash to {Sass::Engine#initialize}.
977
975
  # Available options are:
978
976
  #
979
- # [<tt>:style</tt>] Sets the style of the CSS output.
980
- # See the section on Output Style, above.
981
- #
982
- # [<tt>:attribute_syntax</tt>] Forces the document to use one syntax for attributes.
983
- # If the correct syntax isn't used, an error is thrown.
984
- # <tt>:normal</tt> forces the use of a colon
985
- # before the attribute name.
986
- # For example: <tt>:color #0f3</tt>
987
- # or <tt>:width = !main_width</tt>.
988
- # <tt>:alternate</tt> forces the use of a colon or equals sign
989
- # after the attribute name.
990
- # For example: <tt>color: #0f3</tt>
991
- # or <tt>width = !main_width</tt>.
992
- # By default, either syntax is valid.
993
- #
994
- # [<tt>:cache</tt>] Whether parsed Sass files should be cached,
995
- # allowing greater speed. Defaults to true.
996
- #
997
- # [<tt>:never_update</tt>] Whether the CSS files should never be updated,
998
- # even if the template file changes.
999
- # Setting this to true may give small performance gains.
1000
- # It always defaults to false.
1001
- # Only has meaning within Ruby on Rails or Merb.
1002
- #
1003
- # [<tt>:always_update</tt>] Whether the CSS files should be updated every
1004
- # time a controller is accessed,
1005
- # as opposed to only when the template has been modified.
1006
- # Defaults to false.
1007
- # Only has meaning within Ruby on Rails or Merb.
1008
- #
1009
- # [<tt>:always_check</tt>] Whether a Sass template should be checked for updates every
1010
- # time a controller is accessed,
1011
- # as opposed to only when the Rails server starts.
1012
- # If a Sass template has been updated,
1013
- # it will be recompiled and will overwrite the corresponding CSS file.
1014
- # Defaults to false in production mode, true otherwise.
1015
- # Only has meaning within Ruby on Rails or Merb.
1016
- #
1017
- # [<tt>:full_exception</tt>] Whether an error in the Sass code
1018
- # should cause Sass to provide a detailed description.
1019
- # If set to true, the specific error will be displayed
1020
- # along with a line number and source snippet.
1021
- # Otherwise, a simple uninformative error message will be displayed.
1022
- # Defaults to false in production mode, true otherwise.
1023
- # Only has meaning within Ruby on Rails or Merb.
1024
- #
1025
- # [<tt>:template_location</tt>] A path to the root sass template directory for you application.
1026
- # If a hash, :css_location is ignored and this option designates
1027
- # both a mapping between input and output directories.
1028
- # May also be given a list of 2-element lists, instead of a hash.
1029
- # Defaults to <tt>RAILS_ROOT + "/public/stylesheets/sass"</tt>
1030
- # or <tt>MERB_ROOT + "/public/stylesheets/sass"</tt>.
1031
- # Only has meaning within Ruby on Rails or Merb.
1032
- # This will be derived from the :css_location path list if not provided
1033
- # by appending a folder of "sass" to each corresponding css location.
1034
- #
1035
- # [<tt>:css_location</tt>] The path where CSS output should be written to.
1036
- # This option is ignored when :template_location is a Hash.
1037
- # Defaults to <tt>RAILS_ROOT + "/public/stylesheets"</tt>
1038
- # or <tt>MERB_ROOT + "/public/stylesheets"</tt>.
1039
- # Only has meaning within Ruby on Rails or Merb.
1040
- #
1041
- # [<tt>:cache_location</tt>] The path where the cached <tt>sassc</tt> files should be written to.
1042
- # Defaults to <tt>RAILS_ROOT + "/tmp/sass-cache"</tt>,
1043
- # or <tt>MERB_ROOT + "/tmp/sass-cache"</tt>,
1044
- # or just <tt>"./.sass-cache"</tt>.
1045
- #
1046
- # [<tt>:filename</tt>] The filename of the file being rendered.
1047
- # This is used solely for reporting errors,
1048
- # and is automatically set when using Rails or Merb.
1049
- #
1050
- # [<tt>:load_paths</tt>] An array of filesystem paths which should be searched
1051
- # for Sass templates imported with the "@import" directive.
1052
- # This defaults to the working directory and, in Rails or Merb,
1053
- # whatever <tt>:template_location</tt> is.
1054
- #
1055
- # [<tt>:line_numbers</tt>] When set to true, causes the line number and file
1056
- # where a selector is defined to be emitted into the compiled CSS
1057
- # as a comment. Useful for debugging especially when using imports
1058
- # and mixins.
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'