@@ -232,35 +232,35 @@ Taking the idea of constants a bit further are mixins. These let you group whole swathes of CSS attributes into a single directive and then include those anywhere you want: -=blue-border - :border - :color blue - :width 2px - :style dotted + =blue-border + :border + :color blue + :width 2px + :style dotted -.comment - +blue-border - :padding 2px - :margin 10px 0 + .comment + +blue-border + :padding 2px + :margin 10px 0 -.reply - +blue-border + .reply + +blue-border becomes: -.comment { - border-color: blue; - border-width: 2px; - border-style: dotted; - padding: 2px; - margin: 10px 0; -} - -.reply { - border-color: blue; - border-width: 2px; - border-style: dotted; -} + .comment { + border-color: blue; + border-width: 2px; + border-style: dotted; + padding: 2px; + margin: 10px 0; + } + + .reply { + border-color: blue; + border-width: 2px; + border-style: dotted; + } A comprehensive list of features is in the documentation for the Sass module. README.rdoc @@ -651,9 +651,8 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir) # yo # </p> # -# If the <tt>:escape_html</tt> option is set, -# = will sanitize any HTML-sensitive characters generated by the script. -# For example: +# If the <tt>:escape_html</tt> option is set, <tt>=</tt> will sanitize any +# HTML-sensitive characters generated by the script. For example: # # = '<script>alert("I\'m evil!");</script>' # @@ -804,29 +803,29 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir) # # For example: # -# %p foo -# -# This is a comment -# %p bar +# %p foo +# -# This is a comment +# %p bar # # is compiled to: # -# <p>foo</p> -# <p>bar</p> +# <p>foo</p> +# <p>bar</p> # # You can also nest text beneath a silent comment. # None of this text will be rendered. # For example: # -# %p foo -# -# -# This won't be displayed -# Nor will this -# %p bar +# %p foo +# -# +# This won't be displayed +# Nor will this +# %p bar # # is compiled to: # -# <p>foo</p> -# <p>bar</p> +# <p>foo</p> +# <p>bar</p> # # == Other Useful Things # lib/haml.rb @@ -128,7 +128,7 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir) # # By default, either attribute syntax may be used. # If you want to force one or the other, -# see the :attribute_syntax option below. +# see the <tt>:attribute_syntax</tt> option below. # # === Nested Rules # @@ -606,28 +606,28 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir) # To define a mixin you use a slightly modified form of selector syntax. # For example the 'large-text' mixin is defined as follows: # -# =large-text -# :font -# :family Arial -# :size 20px -# :weight bold -# :color #ff0000 +# =large-text +# :font +# :family Arial +# :size 20px +# :weight bold +# :color #ff0000 # # The initial '=' marks this as a mixin rather than a standard selector. # The CSS rules that follow won't be included until the mixin is referenced later on. # Anything you can put into a standard selector, # you can put into a mixin definition. e.g. # -# =clearfix -# display: inline-block -# &:after -# content: "." -# display: block -# height: 0 -# clear: both -# visibility: hidden -# * html & -# height: 1px +# =clearfix +# display: inline-block +# &:after +# content: "." +# display: block +# height: 0 +# clear: both +# visibility: hidden +# * html & +# height: 1px # # # === Mixing it in @@ -637,23 +637,23 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir) # So to inline the 'large-text' defined earlier, # we include the statment '+large-text' in our selector definition thus: # -# .page-title -# +large-text -# :padding 4px -# :margin -# :top 10px +# .page-title +# +large-text +# :padding 4px +# :margin +# :top 10px # # # This will produce the following CSS output: # -# .page-title { -# font-family: Arial; -# font-size: 20px; -# font-weight: bold; -# color: #ff0000; -# padding: 4px; -# margin-top: 10px; -# } +# .page-title { +# font-family: Arial; +# font-size: 20px; +# font-weight: bold; +# color: #ff0000; +# padding: 4px; +# margin-top: 10px; +# } # # Any number of mixins may be defined and there is no limit on # the number that can be included in a particular selector. @@ -661,16 +661,16 @@ $LOAD_PATH << dir unless $LOAD_PATH.include?(dir) # Mixin definitions can also include references to other mixins defined earlier in the file. # E.g. # -# =highlighted-background -# background: -# color: #fc0 -# =header-text -# font: -# size: 20px +# =highlighted-background +# background: +# color: #fc0 +# =header-text +# font: +# size: 20px # -# =compound -# +highlighted-background -# +header-text +# =compound +# +highlighted-background +# +header-text # # # == Output Style lib/sass.rb bd820f5d415297986a22db2ad55e54789aca620b Mislav Marohnić mislav.marohnic@gmail.com http://github.com/nex3/haml/commit/1e838f74b66e21c3918742b8249a42fe0517e5b5 1e838f74b66e21c3918742b8249a42fe0517e5b5 2008-05-03T02:25:48-07:00 2008-05-02T20:56:27-07:00 properly indent a bunch of code samples 8e3450342c2d9e4a480b239c56c55585318229e5 Nathan Weizenbaum nex342@gmail.com