summaryrefslogtreecommitdiff
path: root/README.rst
diff options
context:
space:
mode:
authorGerman M. Bravo <german.mb@deipi.com>2011-02-27 17:18:28 -0600
committerGerman M. Bravo <german.mb@deipi.com>2011-02-27 17:18:28 -0600
commitaa44612ee9e4c652c0c3767348cdc01ca0273587 (patch)
tree938b090328a141d3b751eeb7e7284a8e68196c63 /README.rst
parentdc221c441d2b4f21b4949151e601ea6175c5c875 (diff)
downloadpyscss-aa44612ee9e4c652c0c3767348cdc01ca0273587.tar.gz
Documentation updated
Diffstat (limited to 'README.rst')
-rw-r--r--README.rst104
1 files changed, 52 insertions, 52 deletions
diff --git a/README.rst b/README.rst
index be74ea1..ddda222 100644
--- a/README.rst
+++ b/README.rst
@@ -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