haml-edge 2.1.30 → 2.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/lib/sass.rb CHANGED
@@ -3,1070 +3,14 @@ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
3
3
 
4
4
  require 'haml/version'
5
5
 
6
- # # Sass (Syntactically Awesome StyleSheets)
6
+ # The module that contains everything Sass-related:
7
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.
8
+ # * {Sass::Engine} is the class used to render Sass within Ruby code.
9
+ # * {Sass::Plugin} is interfaces with web frameworks (Rails and Merb in particular).
10
+ # * {Sass::SyntaxError} is raised when Sass encounters an error.
11
+ # * {Sass::CSS} handles conversion of CSS to Sass.
15
12
  #
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 `sass --help` 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 `require "sass"`
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 `:attribute_syntax` 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 (`\`).
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, `@`,
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
- # ## SassScript
394
- #
395
- # In addition to the declarative templating system,
396
- # Sass supports a simple language known as SassScript
397
- # for dynamically computing CSS values and controlling
398
- # the styles and selectors that get emitted.
399
- #
400
- # ### Interactive Shell
401
- #
402
- # You can easily experiment with SassScript using the interactive shell.
403
- # To launch the shell run the sass command-line with the `-i` option. At the
404
- # prompt, enter any legal SassScript expression to have it evaluated
405
- # and the result printed out for you:
406
- #
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
416
- #
417
- # ### Variables
418
- #
419
- # The most straightforward way to use SassScript
420
- # is to set and reference variables.
421
- # Variables begin with exclamation marks,
422
- # and are set like so:
423
- #
424
- # !width = 5em
425
- #
426
- # You can then refer to them by putting an equals sign
427
- # after your attributes:
428
- #
429
- # #main
430
- # :width = !width
431
- #
432
- # Variables that are first defined in a scoped context are only
433
- # available in that context.
434
- #
435
- # ### Data Types
436
- #
437
- # SassScript supports four data types:
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`)
442
- #
443
- # Any text that doesn't fit into one of those types
444
- # in a SassScript context will cause an error:
445
- #
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"
453
- #
454
- # is compiled to:
455
- #
456
- # p {
457
- # border: 5em solid blue;
458
- # border: 5em solid blue; }
459
- #
460
- #
461
- # ### Operations
462
- #
463
- # SassScript supports the standard arithmetic operations on numbers
464
- # (`+`, `-`, `*`, `/`, `%`),
465
- # and will automatically convert between units if it can:
466
- #
467
- # p
468
- # :width = 1in + 8pt
469
- #
470
- # is compiled to:
471
- #
472
- # p {
473
- # width: 1.111in; }
474
- #
475
- # Relational operators
476
- # (`<`, `>`, `<=`, `>=`)
477
- # are also supported for numbers,
478
- # and equality operators
479
- # (`==`, `!=`)
480
- # are supported for all types.
481
- #
482
- # Most arithmetic operations are supported for color values,
483
- # where they work piecewise:
484
- #
485
- # p
486
- # :color = #010203 + #040506
487
- #
488
- # is compiled to:
489
- #
490
- # p {
491
- # color: #050709; }
492
- #
493
- # Some arithmetic operations even work between numbers and colors:
494
- #
495
- # p
496
- # :color = #010203 * 2
497
- #
498
- # is compiled to:
499
- #
500
- # p {
501
- # color: #020406; }
502
- #
503
- # The `+` operation can be used to concatenate strings:
504
- #
505
- # p
506
- # :cursor = "e" + "-resize"
507
- #
508
- # is compiled to:
509
- #
510
- # p {
511
- # cursor: e-resize; }
512
- #
513
- # Within a string of text, #{} style interpolation can be used to
514
- # place dynamic values within the string:
515
- #
516
- # p
517
- # :border = "#{5px + 10pt} solid #ccc"
518
- #
519
- # Finally, SassScript supports `and`, `or`, and `not` operators
520
- # for boolean values.
521
- #
522
- # ### Parentheses
523
- #
524
- # Parentheses can be used to affect the order of operations:
525
- #
526
- # p
527
- # :width = 1em + (2em * 3)
528
- #
529
- # is compiled to:
530
- #
531
- # p {
532
- # width: 7em; }
533
- #
534
- # ### Functions
535
- #
536
- # SassScript defines some useful functions
537
- # that are called using the normal CSS function syntax:
538
- #
539
- # p
540
- # :color = hsl(0, 100%, 50%)
541
- #
542
- # is compiled to:
543
- #
544
- # #main {
545
- # color: #ff0000; }
546
- #
547
- # The following functions are provided: `hsl`, `percentage`, `round`, `ceil`, `floor`, and `abs`.
548
- # You can define additional functions in ruby.
549
- #
550
- # See {Sass::Script::Functions} for more information.
551
- #
552
- # ### Interpolation
553
- #
554
- # You can also use SassScript variables in selectors
555
- # and attribute names using #{} interpolation syntax:
556
- #
557
- # !name = foo
558
- # !attr = border
559
- # p.#{!name}
560
- # #{attr}-color: blue
561
- #
562
- # is compiled to:
563
- #
564
- # p.foo {
565
- # border-color: blue; }
566
- #
567
- # ### Optional Assignment
568
- #
569
- # You can assign to variables if they aren't already assigned
570
- # using the `||=` assignment operator. This means that if the
571
- # variable has already been assigned to, it won't be re-assigned,
572
- # but if it doesn't have a value yet, it will be given one.
573
- #
574
- # For example:
575
- #
576
- # !content = "First content"
577
- # !content ||= "Second content?"
578
- # !new_content ||= "First time reference"
579
- #
580
- # #main
581
- # content = !content
582
- # new-content = !new_content
583
- #
584
- # is compiled to:
585
- #
586
- # #main {
587
- # content: First content;
588
- # new-content: First time reference; }
589
- #
590
- # ## Control Structures
591
- #
592
- # SassScript supports basic control structures for looping and conditionals
593
- # using the same syntax as directives.
594
- #
595
- # ### `@if`
596
- #
597
- # The `@if` statement takes a SassScript expression
598
- # and prints the code nested beneath it if the expression returns
599
- # anything other than `false`:
600
- #
601
- # p
602
- # @if 1 + 1 == 2
603
- # :border 1px solid
604
- # @if 5 < 3
605
- # :border 2px dotted
606
- #
607
- # is compiled to:
608
- #
609
- # p {
610
- # border: 1px solid; }
611
- #
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.
617
- # For example:
618
- #
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
629
- #
630
- # is compiled to:
631
- #
632
- # p {
633
- # color: green; }
634
- #
635
- # ### `@for`
636
- #
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
642
- # that should return integers.
643
- #
644
- # The `@for` statement sets `<var>` to each number
645
- # from `<start>` to `<end>`,
646
- # including `<end>` if `through` is used.
647
- # For example:
648
- #
649
- # @for !i from 1 through 3
650
- # .item-#{!i}
651
- # :width = 2em * !i
652
- #
653
- # is compiled to:
654
- #
655
- # .item-1 {
656
- # width: 2em; }
657
- # .item-2 {
658
- # width: 4em; }
659
- # .item-3 {
660
- # width: 6em; }
661
- #
662
- # ### `@while`
663
- #
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`
667
- # statement is capable of.
668
- # For example:
669
- #
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.
711
- # For example:
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
- #
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
- # This will produce the following CSS output:
738
- #
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; }
746
- #
747
- # Any number of mixins may be defined and there is no limit on
748
- # the number that can be included in a particular selector.
749
- #
750
- # Mixin definitions can also include references to other mixins.
751
- # For example:
752
- #
753
- # =compound
754
- # +highlighted-background
755
- # +header-text
756
- #
757
- # =highlighted-background
758
- # background:
759
- # color: #fc0
760
- # =header-text
761
- # font:
762
- # size: 20px
763
- #
764
- # Mixins that only define descendent selectors, can be safely mixed
765
- # into the top most level of a document.
766
- #
767
- # ### Arguments
768
- #
769
- # Mixins can take arguments which can be used with SassScript:
770
- #
771
- # =sexy-border(!color)
772
- # :border
773
- # :color = !color
774
- # :width 1in
775
- # :style dashed
776
- # p
777
- # +sexy-border("blue")
778
- #
779
- # is compiled to:
780
- #
781
- # p {
782
- # border-color: #0000ff;
783
- # border-width: 1in;
784
- # border-style: dashed; }
785
- #
786
- # Mixins can also specify default values for their arguments:
787
- #
788
- # =sexy-border(!color, !width = 1in)
789
- # :border
790
- # :color = !color
791
- # :width = !width
792
- # :style dashed
793
- # p
794
- # +sexy-border("blue")
795
- #
796
- # is compiled to:
797
- #
798
- # p {
799
- # border-color: #0000ff;
800
- # border-width: 1in;
801
- # border-style: dashed; }
802
- #
803
- # ## Comments
804
- #
805
- # ### Silent Comments
806
- #
807
- # It's simple to add "silent" comments,
808
- # which don't output anything to the CSS document,
809
- # to a Sass document.
810
- # Simply use the familiar C-style notation for a one-line comment, `//`,
811
- # at the normal indentation level and all text following it won't be output.
812
- # For example:
813
- #
814
- # // A very awesome rule.
815
- # #awesome.rule
816
- # // An equally awesome attribute.
817
- # :awesomeness very
818
- #
819
- # becomes
820
- #
821
- # #awesome.rule {
822
- # awesomeness: very; }
823
- #
824
- # You can also nest text beneath a comment to comment out a whole block.
825
- # For example:
826
- #
827
- # // A very awesome rule
828
- # #awesome.rule
829
- # // Don't use these attributes
830
- # color: green
831
- # font-size: 10em
832
- # color: red
833
- #
834
- # becomes
835
- #
836
- # #awesome.rule {
837
- # color: red; }
838
- #
839
- # ### Loud Comments
840
- #
841
- # "Loud" comments are just as easy as silent ones.
842
- # These comments output to the document as CSS comments,
843
- # and thus use the same opening sequence: `/*`.
844
- # For example:
845
- #
846
- # /* A very awesome rule.
847
- # #awesome.rule
848
- # /* An equally awesome attribute.
849
- # :awesomeness very
850
- #
851
- # becomes
852
- #
853
- # /* A very awesome rule. */
854
- # #awesome.rule {
855
- # /* An equally awesome attribute. */
856
- # awesomeness: very; }
857
- #
858
- # You can also nest content beneath loud comments. For example:
859
- #
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
867
- #
868
- # becomes
869
- #
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; }
877
- #
878
- # ## Output Style
879
- #
880
- # Although the default CSS style that Sass outputs is very nice,
881
- # and reflects the structure of the document in a similar way that Sass does,
882
- # sometimes it's good to have other formats available.
883
- #
884
- # Sass allows you to choose between three different output styles
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.
888
- #
889
- # ### `:nested`
890
- #
891
- # Nested style is the default Sass style,
892
- # because it reflects the structure of the document
893
- # in much the same way Sass does.
894
- # Each attribute has its own line,
895
- # but the indentation isn't constant.
896
- # Each rule is indented based on how deeply it's nested.
897
- # For example:
898
- #
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; }
909
- #
910
- # Nested style is very useful when looking at large CSS files
911
- # for the same reason Sass is useful for making them:
912
- # it allows you to very easily grasp the structure of the file
913
- # without actually reading anything.
914
- #
915
- # ### `:expanded`
916
- #
917
- # Expanded is the typical human-made CSS style,
918
- # with each attribute and rule taking up one line.
919
- # Attributes are indented within the rules,
920
- # but the rules aren't indented in any special way.
921
- # For example:
922
- #
923
- # #main {
924
- # color: #fff;
925
- # background-color: #000;
926
- # }
927
- # #main p {
928
- # width: 10em;
929
- # }
930
- #
931
- # .huge {
932
- # font-size: 10em;
933
- # font-weight: bold;
934
- # text-decoration: underline;
935
- # }
936
- #
937
- # ### `:compact`
938
- #
939
- # Compact style, as the name would imply,
940
- # takes up less space than Nested or Expanded.
941
- # However, it's also harder to read.
942
- # Each CSS rule takes up only one line,
943
- # with every attribute defined on that line.
944
- # Nested rules are placed next to each other with no newline,
945
- # while groups of rules have newlines between them.
946
- # For example:
947
- #
948
- # #main { color: #fff; background-color: #000; }
949
- # #main p { width: 10em; }
950
- #
951
- # .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
952
- #
953
- # ### `:compressed`
954
- #
955
- # Compressed style takes up the minimum amount of space possible,
956
- # having no whitespace except that necessary to separate selectors
957
- # and a newline at the end of the file.
958
- # It's not meant to be human-readable.
959
- # For example:
960
- #
961
- # #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
962
- #
963
- # ## Sass Options
964
- #
965
- # Options can be set by setting the {Sass::Plugin.options} hash
966
- # in `environment.rb` in Rails...
967
- #
968
- # Sass::Plugin.options[:style] = :compact
969
- #
970
- # ...or by setting the `Merb::Plugin.config[:sass]` hash in `init.rb` in Merb...
971
- #
972
- # Merb::Plugin.config[:sass][:style] = :compact
973
- #
974
- # ...or by passing an options hash to {Sass::Engine#initialize}.
975
- # Available options are:
976
- #
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.
13
+ # Also see the {file:SASS_REFERENCE.md full Sass reference}.
1070
14
  module Sass
1071
15
  extend Haml::Version
1072
16