diff options
author | German M. Bravo <german.mb@deipi.com> | 2011-02-27 17:18:28 -0600 |
---|---|---|
committer | German M. Bravo <german.mb@deipi.com> | 2011-02-27 17:18:28 -0600 |
commit | aa44612ee9e4c652c0c3767348cdc01ca0273587 (patch) | |
tree | 938b090328a141d3b751eeb7e7284a8e68196c63 /README.rst | |
parent | dc221c441d2b4f21b4949151e601ea6175c5c875 (diff) | |
download | pyscss-aa44612ee9e4c652c0c3767348cdc01ca0273587.tar.gz |
Documentation updated
Diffstat (limited to 'README.rst')
-rw-r--r-- | README.rst | 104 |
1 files changed, 52 insertions, 52 deletions
@@ -73,21 +73,21 @@ Examples @option compress: no; .selector { - a { - display: block; - } - strong { - color: blue; - } + a { + display: block; + } + strong { + color: blue; + } } ...produces:: .selector a { - display: block; + display: block; } .selector strong { - color: #00f; + color: #00f; } #. **Variables** @@ -98,17 +98,17 @@ Examples $style: solid; $side: bottom; #navbar { - border-#{$side}: { - color: $main-color; - style: $style; - } + border-#{$side}: { + color: $main-color; + style: $style; + } } ...produces:: #navbar { - border-bottom-color: #ce4dd6; - border-bottom-style: solid; + border-bottom-color: #ce4dd6; + border-bottom-style: solid; } #. **Mixins** @@ -116,9 +116,9 @@ Examples @option compress: no; @mixin rounded($side, $radius: 10px) { - border-#{$side}-radius: $radius; - -moz-border-radius-#{$side}: $radius; - -webkit-border-#{$side}-radius: $radius; + border-#{$side}-radius: $radius; + -moz-border-radius-#{$side}: $radius; + -webkit-border-#{$side}-radius: $radius; } #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } @@ -127,19 +127,19 @@ Examples ...produces:: #navbar li { - border-top-radius: 10px; - -moz-border-radius-top: 10px; - -webkit-border-top-radius: 10px; + border-top-radius: 10px; + -moz-border-radius-top: 10px; + -webkit-border-top-radius: 10px; } #footer { - border-top-radius: 5px; - -moz-border-radius-top: 5px; - -webkit-border-top-radius: 5px; + border-top-radius: 5px; + -moz-border-radius-top: 5px; + -webkit-border-top-radius: 5px; } #sidebar { - border-left-radius: 8px; - -moz-border-radius-left: 8px; - -webkit-border-left-radius: 8px; + border-left-radius: 8px; + -moz-border-radius-left: 8px; + -webkit-border-left-radius: 8px; } #. **Extend** (using `@extend`) @@ -147,30 +147,30 @@ Examples @option compress: no; .error { - border: 1px #f00; - background-color: #fdd; + border: 1px #f00; + background-color: #fdd; } .error.intrusion { - background-image: url("/image/hacked.png"); + background-image: url("/image/hacked.png"); } .seriousError { - @extend .error; - border-width: 3px; + @extend .error; + border-width: 3px; } ...produces:: .error, .seriousError { - border: 1px red; - background-color: #fdd; + border: 1px red; + background-color: #fdd; } .error.intrusion, .seriousError.intrusion { - background-image: url("/image/hacked.png"); + background-image: url("/image/hacked.png"); } .seriousError { - border-width: 3px; + border-width: 3px; } #. **Sprites** (using `sprite-map()`) @@ -179,30 +179,30 @@ Examples @option compress: no; $icons: sprite-map("sociable/\*.png"); // contains sociable/facebook.png among others. div { - background: $icons; + background: $icons; } @each $icon in sprites($icons) { - div .$icon { - width: image-width(sprite-file($icons, $icon)); - height: image-height(sprite-file($icons, $icon)); - background-position: sprite-position($icons, $icon); - } + div .$icon { + width: image-width(sprite-file($icons, $icon)); + height: image-height(sprite-file($icons, $icon)); + background-position: sprite-position($icons, $icon); + } } ...generates a new sprite file and produces something like:: div { - background: url("/media/assets/u8Y7yEQL0UffAVw5rX7yhw.png?_=1298240989") 0px 0px no-repeat; + background: url("/media/assets/u8Y7yEQL0UffAVw5rX7yhw.png?_=1298240989") 0px 0px no-repeat; } - div .facebook { - width: 32px; - height: 32px; - background-position: 0px 0px; + div .facebook { + width: 32px; + height: 32px; + background-position: 0px 0px; } div .twitter { - width: 32px; - height: 32px; - background-position: 0px -32px; + width: 32px; + height: 32px; + background-position: 0px -32px; } ... @@ -212,15 +212,15 @@ Examples $ python scss.py --interactive >>> @import "compass/css3" >>> show() - \['functions', 'mixins', 'options', 'vars'] + ['functions', 'mixins', 'options', 'vars'] >>> show(mixins) - \['apply-origin', + ['apply-origin', 'apply-transform', ... 'transparent'] >>> show(mixins, transparent) @mixin transparent() { - @include opacity(0); + @include opacity(0); } >>> 1px + 5px 6px |