haml-edge 2.1.1

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