merbjedi-haml 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/FAQ +138 -0
- data/MIT-LICENSE +20 -0
- data/README.rdoc +332 -0
- data/REVISION +1 -0
- data/Rakefile +184 -0
- data/VERSION +1 -0
- data/bin/css2sass +7 -0
- data/bin/haml +9 -0
- data/bin/html2haml +7 -0
- data/bin/sass +8 -0
- data/extra/haml-mode.el +434 -0
- data/extra/sass-mode.el +98 -0
- data/init.rb +8 -0
- data/lib/haml.rb +1025 -0
- data/lib/haml/buffer.rb +255 -0
- data/lib/haml/engine.rb +268 -0
- data/lib/haml/error.rb +22 -0
- data/lib/haml/exec.rb +395 -0
- data/lib/haml/filters.rb +276 -0
- data/lib/haml/helpers.rb +465 -0
- data/lib/haml/helpers/action_view_extensions.rb +45 -0
- data/lib/haml/helpers/action_view_mods.rb +181 -0
- data/lib/haml/html.rb +218 -0
- data/lib/haml/precompiler.rb +896 -0
- data/lib/haml/shared.rb +45 -0
- data/lib/haml/template.rb +51 -0
- data/lib/haml/template/patch.rb +58 -0
- data/lib/haml/template/plugin.rb +72 -0
- data/lib/haml/util.rb +77 -0
- data/lib/haml/version.rb +47 -0
- data/lib/sass.rb +1062 -0
- data/lib/sass/css.rb +388 -0
- data/lib/sass/engine.rb +501 -0
- data/lib/sass/environment.rb +33 -0
- data/lib/sass/error.rb +35 -0
- data/lib/sass/plugin.rb +203 -0
- data/lib/sass/plugin/merb.rb +56 -0
- data/lib/sass/plugin/rails.rb +24 -0
- data/lib/sass/repl.rb +44 -0
- data/lib/sass/script.rb +38 -0
- data/lib/sass/script/bool.rb +13 -0
- data/lib/sass/script/color.rb +97 -0
- data/lib/sass/script/funcall.rb +28 -0
- data/lib/sass/script/functions.rb +122 -0
- data/lib/sass/script/lexer.rb +144 -0
- data/lib/sass/script/literal.rb +60 -0
- data/lib/sass/script/number.rb +231 -0
- data/lib/sass/script/operation.rb +30 -0
- data/lib/sass/script/parser.rb +142 -0
- data/lib/sass/script/string.rb +42 -0
- data/lib/sass/script/unary_operation.rb +21 -0
- data/lib/sass/script/variable.rb +20 -0
- data/lib/sass/tree/attr_node.rb +64 -0
- data/lib/sass/tree/comment_node.rb +30 -0
- data/lib/sass/tree/debug_node.rb +22 -0
- data/lib/sass/tree/directive_node.rb +50 -0
- data/lib/sass/tree/file_node.rb +27 -0
- data/lib/sass/tree/for_node.rb +29 -0
- data/lib/sass/tree/if_node.rb +27 -0
- data/lib/sass/tree/mixin_def_node.rb +18 -0
- data/lib/sass/tree/mixin_node.rb +34 -0
- data/lib/sass/tree/node.rb +97 -0
- data/lib/sass/tree/rule_node.rb +120 -0
- data/lib/sass/tree/variable_node.rb +24 -0
- data/lib/sass/tree/while_node.rb +20 -0
- data/rails/init.rb +1 -0
- data/test/benchmark.rb +99 -0
- data/test/haml/engine_test.rb +852 -0
- data/test/haml/helper_test.rb +224 -0
- data/test/haml/html2haml_test.rb +92 -0
- data/test/haml/markaby/standard.mab +52 -0
- data/test/haml/mocks/article.rb +6 -0
- data/test/haml/results/content_for_layout.xhtml +15 -0
- data/test/haml/results/eval_suppressed.xhtml +9 -0
- data/test/haml/results/filters.xhtml +62 -0
- data/test/haml/results/helpers.xhtml +93 -0
- data/test/haml/results/helpful.xhtml +10 -0
- data/test/haml/results/just_stuff.xhtml +68 -0
- data/test/haml/results/list.xhtml +12 -0
- data/test/haml/results/nuke_inner_whitespace.xhtml +40 -0
- data/test/haml/results/nuke_outer_whitespace.xhtml +148 -0
- data/test/haml/results/original_engine.xhtml +20 -0
- data/test/haml/results/partial_layout.xhtml +5 -0
- data/test/haml/results/partials.xhtml +21 -0
- data/test/haml/results/render_layout.xhtml +3 -0
- data/test/haml/results/silent_script.xhtml +74 -0
- data/test/haml/results/standard.xhtml +42 -0
- data/test/haml/results/tag_parsing.xhtml +23 -0
- data/test/haml/results/very_basic.xhtml +5 -0
- data/test/haml/results/whitespace_handling.xhtml +89 -0
- data/test/haml/rhtml/_av_partial_1.rhtml +12 -0
- data/test/haml/rhtml/_av_partial_2.rhtml +8 -0
- data/test/haml/rhtml/action_view.rhtml +62 -0
- data/test/haml/rhtml/standard.rhtml +54 -0
- data/test/haml/template_test.rb +204 -0
- data/test/haml/templates/_av_partial_1.haml +9 -0
- data/test/haml/templates/_av_partial_1_ugly.haml +9 -0
- data/test/haml/templates/_av_partial_2.haml +5 -0
- data/test/haml/templates/_av_partial_2_ugly.haml +5 -0
- data/test/haml/templates/_layout.erb +3 -0
- data/test/haml/templates/_layout_for_partial.haml +3 -0
- data/test/haml/templates/_partial.haml +8 -0
- data/test/haml/templates/_text_area.haml +3 -0
- data/test/haml/templates/action_view.haml +47 -0
- data/test/haml/templates/action_view_ugly.haml +47 -0
- data/test/haml/templates/breakage.haml +8 -0
- data/test/haml/templates/content_for_layout.haml +10 -0
- data/test/haml/templates/eval_suppressed.haml +11 -0
- data/test/haml/templates/filters.haml +66 -0
- data/test/haml/templates/helpers.haml +95 -0
- data/test/haml/templates/helpful.haml +11 -0
- data/test/haml/templates/just_stuff.haml +83 -0
- data/test/haml/templates/list.haml +12 -0
- data/test/haml/templates/nuke_inner_whitespace.haml +32 -0
- data/test/haml/templates/nuke_outer_whitespace.haml +144 -0
- data/test/haml/templates/original_engine.haml +17 -0
- data/test/haml/templates/partial_layout.haml +3 -0
- data/test/haml/templates/partialize.haml +1 -0
- data/test/haml/templates/partials.haml +12 -0
- data/test/haml/templates/render_layout.haml +2 -0
- data/test/haml/templates/silent_script.haml +40 -0
- data/test/haml/templates/standard.haml +42 -0
- data/test/haml/templates/standard_ugly.haml +42 -0
- data/test/haml/templates/tag_parsing.haml +21 -0
- data/test/haml/templates/very_basic.haml +4 -0
- data/test/haml/templates/whitespace_handling.haml +87 -0
- data/test/linked_rails.rb +12 -0
- data/test/sass/css2sass_test.rb +193 -0
- data/test/sass/engine_test.rb +752 -0
- data/test/sass/functions_test.rb +96 -0
- data/test/sass/more_results/more1.css +9 -0
- data/test/sass/more_results/more1_with_line_comments.css +26 -0
- data/test/sass/more_results/more_import.css +29 -0
- data/test/sass/more_templates/_more_partial.sass +2 -0
- data/test/sass/more_templates/more1.sass +23 -0
- data/test/sass/more_templates/more_import.sass +11 -0
- data/test/sass/plugin_test.rb +208 -0
- data/test/sass/results/alt.css +4 -0
- data/test/sass/results/basic.css +9 -0
- data/test/sass/results/compact.css +5 -0
- data/test/sass/results/complex.css +87 -0
- data/test/sass/results/compressed.css +1 -0
- data/test/sass/results/expanded.css +19 -0
- data/test/sass/results/import.css +29 -0
- data/test/sass/results/line_numbers.css +49 -0
- data/test/sass/results/mixins.css +95 -0
- data/test/sass/results/multiline.css +24 -0
- data/test/sass/results/nested.css +22 -0
- data/test/sass/results/parent_ref.css +13 -0
- data/test/sass/results/script.css +16 -0
- data/test/sass/results/subdir/nested_subdir/nested_subdir.css +1 -0
- data/test/sass/results/subdir/subdir.css +3 -0
- data/test/sass/results/units.css +11 -0
- data/test/sass/script_test.rb +152 -0
- data/test/sass/templates/_partial.sass +2 -0
- data/test/sass/templates/alt.sass +16 -0
- data/test/sass/templates/basic.sass +23 -0
- data/test/sass/templates/bork.sass +2 -0
- data/test/sass/templates/bork2.sass +2 -0
- data/test/sass/templates/compact.sass +17 -0
- data/test/sass/templates/complex.sass +309 -0
- data/test/sass/templates/compressed.sass +15 -0
- data/test/sass/templates/expanded.sass +17 -0
- data/test/sass/templates/import.sass +11 -0
- data/test/sass/templates/importee.sass +19 -0
- data/test/sass/templates/line_numbers.sass +13 -0
- data/test/sass/templates/mixins.sass +76 -0
- data/test/sass/templates/multiline.sass +20 -0
- data/test/sass/templates/nested.sass +25 -0
- data/test/sass/templates/parent_ref.sass +25 -0
- data/test/sass/templates/script.sass +101 -0
- data/test/sass/templates/subdir/nested_subdir/_nested_partial.sass +2 -0
- data/test/sass/templates/subdir/nested_subdir/nested_subdir.sass +3 -0
- data/test/sass/templates/subdir/subdir.sass +6 -0
- data/test/sass/templates/units.sass +11 -0
- data/test/test_helper.rb +21 -0
- metadata +273 -0
data/FAQ
ADDED
@@ -0,0 +1,138 @@
|
|
1
|
+
= Frequently Asked Questions
|
2
|
+
|
3
|
+
== Haml
|
4
|
+
|
5
|
+
=== How do I put a punctuation mark after an element, like "<tt>I like <strong>cake</strong>!</tt>"?
|
6
|
+
|
7
|
+
Expressing the structure of a document
|
8
|
+
and expressing inline formatting are two very different problems.
|
9
|
+
Haml is mostly designed for structure,
|
10
|
+
so the best way to deal with formatting is to leave it to other languages
|
11
|
+
that are designed for it.
|
12
|
+
You could use Textile:
|
13
|
+
|
14
|
+
%p
|
15
|
+
:textile
|
16
|
+
I like *cake*!
|
17
|
+
|
18
|
+
or Markdown:
|
19
|
+
|
20
|
+
%p
|
21
|
+
:markdown
|
22
|
+
I like **cake**!
|
23
|
+
|
24
|
+
or plain old XHTML:
|
25
|
+
|
26
|
+
%p I like <strong>cake</strong>!
|
27
|
+
|
28
|
+
If you're inserting something that's generated by a helper, like a link,
|
29
|
+
then it's even easier:
|
30
|
+
|
31
|
+
%p== I like #{link_to 'chocolate', 'http://franschocolates.com'}!
|
32
|
+
|
33
|
+
=== How do I stop Haml from indenting the contents of my +pre+ and +textarea+ tags?
|
34
|
+
|
35
|
+
Because Haml automatically indents the HTML source code,
|
36
|
+
the contents of whitespace-sensitive tags like +pre+ and +textarea+
|
37
|
+
can get screwed up.
|
38
|
+
The solution is to replace the newlines inside these tags
|
39
|
+
with HTML newline entities (<tt>
</tt>),
|
40
|
+
which Haml does using the Haml::Helpers#preserve and Haml::Helpers#find_and_preserve helpers.
|
41
|
+
|
42
|
+
Normally, Haml will do this for you automatically
|
43
|
+
when you're using a tag that needs it
|
44
|
+
(this can be customized using the <tt>:preserve</tt> option;
|
45
|
+
see the Options section of the {Haml reference}(../classes/Haml.html)).
|
46
|
+
For example,
|
47
|
+
|
48
|
+
%p
|
49
|
+
%textarea= "Foo\nBar"
|
50
|
+
|
51
|
+
will be compiled to
|
52
|
+
|
53
|
+
<p>
|
54
|
+
<textarea>Foo
Bar</textarea>
|
55
|
+
</p>
|
56
|
+
|
57
|
+
However, if a helper is generating the tag,
|
58
|
+
Haml can't detect that and so you'll have to call +find_and_preserve+ yourself.
|
59
|
+
You can also use <tt>~</tt>, which is the same as <tt>=</tt>
|
60
|
+
except that it automatically runs +find_and_preserve+ on its input.
|
61
|
+
For example:
|
62
|
+
|
63
|
+
%p= find_and_preserve "<textarea>Foo\nBar</textarea>"
|
64
|
+
|
65
|
+
is the same as
|
66
|
+
|
67
|
+
%p~ "<textarea>Foo\nBar</textarea>"
|
68
|
+
|
69
|
+
and renders
|
70
|
+
|
71
|
+
<p><textarea>Foo
Bar</textarea></p>
|
72
|
+
|
73
|
+
=== How do I make my long lines of Ruby code look nicer in my Haml document?
|
74
|
+
|
75
|
+
Put them in a helper or your model.
|
76
|
+
|
77
|
+
Haml purposefully makes it annoying to put lots of Ruby code into your templates,
|
78
|
+
because lots of code doesn't belong in the view.
|
79
|
+
If you take that huge +link_to_remote+ call
|
80
|
+
and move it to a +update_sidebar_link+ helper,
|
81
|
+
it'll make your view both easier to read and more semantic.
|
82
|
+
|
83
|
+
If you absolutely must put lots of code in your template,
|
84
|
+
Haml offers a somewhat awkward multiline-continuation tool.
|
85
|
+
Put a <tt>|</tt> (pipe character) at the end of each line you want to be merged into one
|
86
|
+
(including the last line!).
|
87
|
+
For example:
|
88
|
+
|
89
|
+
%p= @this.is(way.too.much). |
|
90
|
+
code("and I should"). |
|
91
|
+
really_move.it.into( |
|
92
|
+
:a => @helper) |
|
93
|
+
|
94
|
+
=== I have Haml installed. Why is Rails (only looking for <tt>.html.erb</tt> files | rendering Haml files as plain text | rendering Haml files as blank pages)?
|
95
|
+
|
96
|
+
There are several reasons these things might be happening.
|
97
|
+
First of all, make sure vendor/plugins/haml really exists
|
98
|
+
and has an init.rb file in there.
|
99
|
+
Then try restarting Mongrel or WEBrick or whatever you might be using.
|
100
|
+
|
101
|
+
Finally, if none of these work,
|
102
|
+
chances are you've got some localization plugin like Globalize installed.
|
103
|
+
Such plugins often don't play nicely with Haml.
|
104
|
+
Luckily, there's usually an easy fix.
|
105
|
+
For Globalize, just edit globalize/lib/globalize/rails/action_view.rb
|
106
|
+
and change
|
107
|
+
|
108
|
+
@@re_extension = /\.(rjs|rhtml|rxml)$/
|
109
|
+
|
110
|
+
to
|
111
|
+
|
112
|
+
@@re_extension = /\.(rjs|rhtml|rxml|erb|builder|haml)$/
|
113
|
+
|
114
|
+
For other plugins, a little searching will probably turn up a way to fix them as well.
|
115
|
+
|
116
|
+
== Sass
|
117
|
+
|
118
|
+
=== Can I use a variable from my controller in my Sass file?
|
119
|
+
|
120
|
+
No. Sass files aren't views.
|
121
|
+
They're compiled once into static CSS files,
|
122
|
+
then left along until they're changed and need to be compiled again.
|
123
|
+
Not only don't you want to be running a full request cycle
|
124
|
+
every time someone requests a stylesheet,
|
125
|
+
but it's not a great idea to put much logic in there anyway
|
126
|
+
due to how browsers handle them.
|
127
|
+
|
128
|
+
If you really need some sort of dynamic CSS,
|
129
|
+
the best thing to do is put only the snippet you need to dynamically set
|
130
|
+
in the +head+ of your HTML document.
|
131
|
+
|
132
|
+
== You still haven't answered my question!
|
133
|
+
|
134
|
+
Sorry! Try looking at the Haml or Sass references,
|
135
|
+
in the doucmentation for the haml and Sass modules, respectively.
|
136
|
+
If you can't find an answer there,
|
137
|
+
feel free to ask in #haml on irc.freenode.net
|
138
|
+
or send an email to the {mailing list}[http://groups.google.com/group/haml?hl=en].
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright (c) 2006-2008 Hampton Catlin
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.rdoc
ADDED
@@ -0,0 +1,332 @@
|
|
1
|
+
= Haml and Sass
|
2
|
+
|
3
|
+
Haml and Sass are templating engines
|
4
|
+
for the two most common types of documents on the web:
|
5
|
+
HTML and CSS, respectively.
|
6
|
+
They are designed to make it both easier and more pleasant
|
7
|
+
to code HTML and CSS documents,
|
8
|
+
by eliminating redundancy,
|
9
|
+
reflecting the underlying structure that the document represents,
|
10
|
+
and providing elegant, easily understandable, and powerful syntax.
|
11
|
+
|
12
|
+
== Using
|
13
|
+
|
14
|
+
There are several ways to use Haml and Sass.
|
15
|
+
They can be used as a plugin for Rails or Merb,
|
16
|
+
or embedded on their own in other applications.
|
17
|
+
The first step of all of these is to install the Haml gem:
|
18
|
+
|
19
|
+
gem install haml
|
20
|
+
|
21
|
+
To install Haml and Sass as a Rails plugin,
|
22
|
+
just run <tt>haml --rails path/to/rails/app</tt>
|
23
|
+
and both Haml and Sass will be installed.
|
24
|
+
Views with the <tt>.haml</tt> (or <tt>.html.haml</tt> for edge)
|
25
|
+
extension will automatically use Haml.
|
26
|
+
Sass is a little more complicated;
|
27
|
+
<tt>.sass</tt> files should be placed in public/stylesheets/sass,
|
28
|
+
where they'll be automatically compiled
|
29
|
+
to corresponding CSS files in public/stylesheets when needed
|
30
|
+
(the Sass template directory is customizable...
|
31
|
+
see the Sass module docs for details).
|
32
|
+
|
33
|
+
For Merb, <tt>.html.haml</tt> views will work without any further modification.
|
34
|
+
To enable Sass, you also need to add a dependency.
|
35
|
+
To do so, just add
|
36
|
+
|
37
|
+
dependency "merb-haml"
|
38
|
+
|
39
|
+
to config/dependencies.rb (or config/init.rb in a flat/very flat Merb application).
|
40
|
+
Then it'll work just like it does in Rails.
|
41
|
+
|
42
|
+
To use Haml and Sass programatically,
|
43
|
+
check out the RDocs for the Haml and Sass modules.
|
44
|
+
|
45
|
+
== Formatting
|
46
|
+
|
47
|
+
=== Haml
|
48
|
+
|
49
|
+
The most basic element of Haml
|
50
|
+
is a shorthand for creating HTML tags:
|
51
|
+
|
52
|
+
%tagname{ :attr1 => 'value1', :attr2 => 'value2' } Contents
|
53
|
+
|
54
|
+
No end-tag is needed; Haml handles that automatically.
|
55
|
+
Adding <tt>class</tt> and <tt>id</tt> attributes is even easier.
|
56
|
+
Haml uses the same syntax as the CSS that styles the document:
|
57
|
+
|
58
|
+
%tagname#id.class
|
59
|
+
|
60
|
+
In fact, when you're using the <tt><div></tt> tag,
|
61
|
+
it becomes <em>even easier</em>.
|
62
|
+
Because <tt><div></tt> is such a common element,
|
63
|
+
a tag without a name defaults to a div. So
|
64
|
+
|
65
|
+
#foo Hello!
|
66
|
+
|
67
|
+
becomes
|
68
|
+
|
69
|
+
<div id='foo'>Hello!</div>
|
70
|
+
|
71
|
+
Haml uses indentation
|
72
|
+
to bring the individual elements to represent the HTML structure.
|
73
|
+
A tag's children are indented beneath than the parent tag.
|
74
|
+
Again, a closing tag is automatically added.
|
75
|
+
For example:
|
76
|
+
|
77
|
+
%ul
|
78
|
+
%li Salt
|
79
|
+
%li Pepper
|
80
|
+
|
81
|
+
becomes:
|
82
|
+
|
83
|
+
<ul>
|
84
|
+
<li>Salt</li>
|
85
|
+
<li>Pepper</li>
|
86
|
+
</ul>
|
87
|
+
|
88
|
+
You can also put plain text as a child of an element:
|
89
|
+
|
90
|
+
%p
|
91
|
+
Hello,
|
92
|
+
World!
|
93
|
+
|
94
|
+
It's even possible to embed Ruby code into Haml documents.
|
95
|
+
An equals sign, <tt>=</tt>, will output the result of the code.
|
96
|
+
A hyphen, <tt>-</tt>, will run the code but not output the result.
|
97
|
+
You can even use control statements
|
98
|
+
like <tt>if</tt> and <tt>while</tt>:
|
99
|
+
|
100
|
+
%p
|
101
|
+
Date/Time:
|
102
|
+
- now = DateTime.now
|
103
|
+
%strong= now
|
104
|
+
- if now > DateTime.parse("December 31, 2006")
|
105
|
+
= "Happy new " + "year!"
|
106
|
+
|
107
|
+
Haml provides far more tools than those presented here.
|
108
|
+
Check out the reference documentation in the Haml module.
|
109
|
+
|
110
|
+
=== Sass
|
111
|
+
|
112
|
+
At its most basic,
|
113
|
+
Sass is just another way of writing CSS.
|
114
|
+
Although it's very much like normal CSS,
|
115
|
+
the basic syntax offers a few helpful features:
|
116
|
+
tabulation indicates the attributes in a rule,
|
117
|
+
rather than non-DRY brackets;
|
118
|
+
and newlines indicate the end of an attribute,
|
119
|
+
rather than a semicolon.
|
120
|
+
For example:
|
121
|
+
|
122
|
+
#main
|
123
|
+
:background-color #f00
|
124
|
+
:width 98%
|
125
|
+
|
126
|
+
becomes:
|
127
|
+
|
128
|
+
#main {
|
129
|
+
background-color: #f00;
|
130
|
+
width: 98% }
|
131
|
+
|
132
|
+
However, Sass provides much more than a way to make CSS look nice.
|
133
|
+
In CSS, it's important to have accurate selectors,
|
134
|
+
so your styles don't just apply to everything.
|
135
|
+
However, in order to do this,
|
136
|
+
you need to use nested element selectors.
|
137
|
+
These get very ugly very quickly.
|
138
|
+
I'm sure everyone's had to write something like
|
139
|
+
"#main .sidebar .top p h1 a",
|
140
|
+
followed by
|
141
|
+
"#main .sidebar .top p h1 a:visited" and
|
142
|
+
"#main .sidebar .top p h1 a:hover".
|
143
|
+
Well, Sass gets rid of that.
|
144
|
+
Like Haml, it uses indentation to indicate the structure of the document.
|
145
|
+
So, what was:
|
146
|
+
|
147
|
+
#main {
|
148
|
+
width: 90%;
|
149
|
+
}
|
150
|
+
#main p {
|
151
|
+
border-style: solid;
|
152
|
+
border-width: 1px;
|
153
|
+
border-color: #00f;
|
154
|
+
}
|
155
|
+
#main p a {
|
156
|
+
text-decoration: none;
|
157
|
+
font-weight: bold;
|
158
|
+
}
|
159
|
+
#main p a:hover {
|
160
|
+
text-decoration: underline;
|
161
|
+
}
|
162
|
+
|
163
|
+
becomes:
|
164
|
+
|
165
|
+
#main
|
166
|
+
:width 90%
|
167
|
+
p
|
168
|
+
:border-style solid
|
169
|
+
:border-width 1px
|
170
|
+
:border-color #00f
|
171
|
+
a
|
172
|
+
:text-decoration none
|
173
|
+
:font-weight bold
|
174
|
+
a:hover
|
175
|
+
:text-decoration underline
|
176
|
+
|
177
|
+
Pretty nice, no? Well, it gets better.
|
178
|
+
One of the main complaints against CSS is that it doesn't allow variables.
|
179
|
+
What if have a color or a width you re-use all the time?
|
180
|
+
In CSS, you just have to re-type it each time,
|
181
|
+
which is a nightmare when you decide to change it later.
|
182
|
+
Not so for Sass!
|
183
|
+
You can use the "!" character to set variables.
|
184
|
+
Then, if you put "=" after your attribute name,
|
185
|
+
you can set it to a variable.
|
186
|
+
For example:
|
187
|
+
|
188
|
+
!note_bg= #55aaff
|
189
|
+
|
190
|
+
#main
|
191
|
+
:width 70%
|
192
|
+
.note
|
193
|
+
:background-color= !note_bg
|
194
|
+
p
|
195
|
+
:width 5em
|
196
|
+
:background-color= !note_bg
|
197
|
+
|
198
|
+
becomes:
|
199
|
+
|
200
|
+
#main {
|
201
|
+
width: 70%; }
|
202
|
+
#main .note {
|
203
|
+
background-color: #55aaff; }
|
204
|
+
#main p {
|
205
|
+
width: 5em;
|
206
|
+
background-color: #55aaff; }
|
207
|
+
|
208
|
+
You can even do simple arithmetic operations with variables,
|
209
|
+
adding numbers and even colors together:
|
210
|
+
|
211
|
+
!main_bg= #46ar12
|
212
|
+
!main_width= 40em
|
213
|
+
|
214
|
+
#main
|
215
|
+
:background-color= !main_bg
|
216
|
+
:width= !main_width
|
217
|
+
.sidebar
|
218
|
+
:background-color= !main_bg + #333333
|
219
|
+
:width= !main_width - 25em
|
220
|
+
|
221
|
+
becomes:
|
222
|
+
|
223
|
+
#main {
|
224
|
+
background-color: #46a312;
|
225
|
+
width: 40em; }
|
226
|
+
#main .sidebar {
|
227
|
+
background-color: #79d645;
|
228
|
+
width: 15em; }
|
229
|
+
|
230
|
+
Taking the idea of variables a bit further are mixins.
|
231
|
+
These let you group whole swathes of CSS attributes into a single
|
232
|
+
directive and then include those anywhere you want:
|
233
|
+
|
234
|
+
=blue-border
|
235
|
+
:border
|
236
|
+
:color blue
|
237
|
+
:width 2px
|
238
|
+
:style dotted
|
239
|
+
|
240
|
+
.comment
|
241
|
+
+blue-border
|
242
|
+
:padding 2px
|
243
|
+
:margin 10px 0
|
244
|
+
|
245
|
+
.reply
|
246
|
+
+blue-border
|
247
|
+
|
248
|
+
becomes:
|
249
|
+
|
250
|
+
.comment {
|
251
|
+
border-color: blue;
|
252
|
+
border-width: 2px;
|
253
|
+
border-style: dotted;
|
254
|
+
padding: 2px;
|
255
|
+
margin: 10px 0;
|
256
|
+
}
|
257
|
+
|
258
|
+
.reply {
|
259
|
+
border-color: blue;
|
260
|
+
border-width: 2px;
|
261
|
+
border-style: dotted;
|
262
|
+
}
|
263
|
+
|
264
|
+
A comprehensive list of features is in
|
265
|
+
the documentation for the Sass module.
|
266
|
+
|
267
|
+
== Indentation
|
268
|
+
|
269
|
+
Indentation can be made up of one or more tabs or spaces.
|
270
|
+
However, indentation must be consistent within a given document.
|
271
|
+
Hard tabs and spaces can't be mixed,
|
272
|
+
and the same number of tabs or spaces must be used throughout.
|
273
|
+
|
274
|
+
== Executables
|
275
|
+
|
276
|
+
The Haml gem includes several executables that are useful
|
277
|
+
for dealing with Haml and Sass from the command line.
|
278
|
+
|
279
|
+
=== +haml+
|
280
|
+
|
281
|
+
The +haml+ executable transforms a source Haml file into HTML.
|
282
|
+
See <tt>haml --help</tt> for further information and options.
|
283
|
+
|
284
|
+
=== +sass+
|
285
|
+
|
286
|
+
The +sass+ executable transforms a source Sass file into CSS.
|
287
|
+
See <tt>sass --help</tt> for further information and options.
|
288
|
+
|
289
|
+
=== <tt>html2haml</tt>
|
290
|
+
|
291
|
+
The <tt>html2haml</tt> executable attempts to transform HTML,
|
292
|
+
optionally with ERB markup, into Haml code.
|
293
|
+
Since HTML is so variable, this transformation is not always perfect;
|
294
|
+
it's a good idea to have a human check the output of this tool.
|
295
|
+
See <tt>html2haml --help</tt> for further information and options.
|
296
|
+
|
297
|
+
=== <tt>css2sass</tt>
|
298
|
+
|
299
|
+
The <tt>css2sass</tt> executable attempts to transform CSS into Sass code.
|
300
|
+
This transformation attempts to use Sass nesting where possible.
|
301
|
+
See <tt>css2sass --help</tt> for further information and options.
|
302
|
+
|
303
|
+
== Authors
|
304
|
+
|
305
|
+
Haml and Sass are designed by Hampton Catlin (hcatlin) and he is the author
|
306
|
+
of the original implementation. However, Hampton doesn't even know his way
|
307
|
+
around the code anymore and mostly just concentrates on the language issues.
|
308
|
+
Hampton lives in Toronto, Ontario (though he's an American by birth) and
|
309
|
+
is a partner at Unspace Interactive.
|
310
|
+
|
311
|
+
Nathan Weizenbaum is the primary maintainer and architect of the "modern" Ruby
|
312
|
+
implementation of Haml. His hard work has kept the project alive by endlessly
|
313
|
+
answering forum posts, fixing bugs, refactoring, finding speed improvements,
|
314
|
+
writing documentation, implementing new features, and getting Hampton
|
315
|
+
coffee (a fitting task for a boy-genius). Nathan lives in Seattle, Washington and
|
316
|
+
while not being a student at University of Washington he consults for
|
317
|
+
Unspace Interactive and Microsoft.
|
318
|
+
|
319
|
+
Chris Eppstein is a core contributor to Sass and the creator of Compass, the first
|
320
|
+
Sass-based framework. Chris focuses on making Sass more powerful, easy to use, and
|
321
|
+
on ways to speed its adoption through the web development community. Chris lives in
|
322
|
+
San Jose, CA with his wife and daughter. He is the Software Architect for Caring.com,
|
323
|
+
a website devoted to the 34 Million caregivers whose parents are sick or elderly,
|
324
|
+
that uses Haml and Sass.
|
325
|
+
|
326
|
+
If you use this software, you must pay Hampton a compliment. And
|
327
|
+
buy Nathan some jelly beans. Maybe pet a kitten. Yeah. Pet that kitty.
|
328
|
+
|
329
|
+
Some of the work on Haml was supported by Unspace Interactive.
|
330
|
+
|
331
|
+
Beyond that, the implementation is licensed under the MIT License.
|
332
|
+
Ok, fine, I guess that means compliments aren't *required*.
|