From 5cee1d85a5edc22867d4f639a063994249477348 Mon Sep 17 00:00:00 2001 From: "German M. Bravo" Date: Sat, 26 Feb 2011 15:20:27 -0600 Subject: Scss version bump to v1.0rc1 --- README.rst | 412 ++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 217 insertions(+), 195 deletions(-) (limited to 'README.rst') diff --git a/README.rst b/README.rst index 7fd1fd6..00ce326 100644 --- a/README.rst +++ b/README.rst @@ -1,7 +1,7 @@ pyScss, a Scss compiler for Python ================================== :Author: - German M. Bravo (Kronuz) + German M. Bravo (Kronuz) About ===== @@ -20,200 +20,212 @@ syntax and functionality. Support ======== -pyScss has most of the funcitonality in Sass 3.2 ...it supports: - - * **Compass**: Compass 0.11 Support - * **Nested rules** - * **Keyword arguments** - * **Mixins**: `@mixin`, `@include` - * **Functions**: `@function`, `@return` - * **Inheritance**: `@extend` - * **Conditions**: `@if`, `@else if`, `@else` - * **Loops**: `@for`, `@each` - * **Variables**: `$`, `@variables`, `@vars` - * **Sprites**: `sprite-map()`, `sprite()`, `sprite-position()`, `sprite-url()`, ... - * **Images**: `image-url()`, `image-width()`, `image-height()`, ... - * **Embedded (inline) images**: `inline-image()` - * **Colors handling**: `adjust-color()`, `scale-color()`, `opacify()`/`transparentize()`, `lighten()`/`darken()`, `mix()`, ... - * **Math functions**: `sin()`, `cos()`, `tan()`, `round()`, `ceil()`, `floor()`, `pi()`, ... - * **CSS Compression**: `@option compress:yes;` +pyScss is fully compatible with SCSS (Sass) 3.2 ...it has: + + * **Compass**: Compass 0.11 Support + * **Nested rules** + * **Keyword arguments** + * **Mixins**: `@mixin`, `@include` + * **Functions**: `@function`, `@return` + * **Inheritance**: `@extend` + * **Conditions**: `@if`, `@else if`, `@else` + * **Loops**: `@for`, `@each` + * **Variables**: `$`, `@variables`, `@vars` + * **Sprites**: `sprite-map()`, `sprite()`, `sprite-position()`, `sprite-url()`, ... + * **Images**: `image-url()`, `image-width()`, `image-height()`, ... + * **Embedded (inline) images**: `inline-image()` + * **Colors handling**: `adjust-color()`, `scale-color()`, `opacify()`/`transparentize()`, `lighten()`/`darken()`, `mix()`, ... + * **Math functions**: `sin()`, `cos()`, `tan()`, `round()`, `ceil()`, `floor()`, `pi()`, ... + * **CSS Compression**: `@option compress:yes;` + +Requirements +============ + * python >= 2.5 + +Installation +============ +pyScss should be installed using pip or setuptools:: + + pip install scss + + easy_install scss Usage ===== Usage example:: - from scss import Scss - css = Scss() - css.compile("a { color: red + green; }") + from scss import Scss + css = Scss() + css.compile("a { color: red + green; }") Or compile from the command line:: - python scss.py < file.scss + python scss.py < file.scss Interactive mode:: - python scss.py --interactive + python scss.py --interactive Examples ======== #. **Nested Rules** - Example:: - - @option compress: no; - .selector { - a { - display: block; - } - strong { - color: blue; - } - } - - ...produces:: - - .selector a { - display: block; - } - .selector strong { - color: #00f; - } + Example:: + + @option compress: no; + .selector { + a { + display: block; + } + strong { + color: blue; + } + } + + ...produces:: + + .selector a { + display: block; + } + .selector strong { + color: #00f; + } #. **Variables** - Example:: - - @option compress: no; - $main-color: #ce4dd6; - $style: solid; - $side: bottom; - #navbar { - border-#{$side}: { - color: $main-color; - style: $style; - } - } - - ...produces:: - - #navbar { - border-bottom-color: #ce4dd6; - border-bottom-style: solid; - } + Example:: + + @option compress: no; + $main-color: #ce4dd6; + $style: solid; + $side: bottom; + #navbar { + border-#{$side}: { + color: $main-color; + style: $style; + } + } + + ...produces:: + + #navbar { + border-bottom-color: #ce4dd6; + border-bottom-style: solid; + } #. **Mixins** - Example:: - - @option compress: no; - @mixin rounded($side, $radius: 10px) { - border-#{$side}-radius: $radius; - -moz-border-radius-#{$side}: $radius; - -webkit-border-#{$side}-radius: $radius; - } - #navbar li { @include rounded(top); } - #footer { @include rounded(top, 5px); } - #sidebar { @include rounded(left, 8px); } - - ...produces:: - - #navbar li { - 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; - } - #sidebar { - border-left-radius: 8px; - -moz-border-radius-left: 8px; - -webkit-border-left-radius: 8px; - } + Example:: + + @option compress: no; + @mixin rounded($side, $radius: 10px) { + border-#{$side}-radius: $radius; + -moz-border-radius-#{$side}: $radius; + -webkit-border-#{$side}-radius: $radius; + } + #navbar li { @include rounded(top); } + #footer { @include rounded(top, 5px); } + #sidebar { @include rounded(left, 8px); } + + ...produces:: + + #navbar li { + 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; + } + #sidebar { + border-left-radius: 8px; + -moz-border-radius-left: 8px; + -webkit-border-left-radius: 8px; + } #. **Extend** (using `@extend`) - Example:: - - @option compress: no; - .error { - border: 1px #f00; - background-color: #fdd; - } - .error.intrusion { - background-image: url("/image/hacked.png"); - } - .seriousError { - @extend .error; - border-width: 3px; - } - - ...produces:: - - .error, - .seriousError { - border: 1px red; - background-color: #fdd; - } - .error.intrusion, - .seriousError.intrusion { - background-image: url("/image/hacked.png"); - } - .seriousError { - border-width: 3px; - } + Example:: + + @option compress: no; + .error { + border: 1px #f00; + background-color: #fdd; + } + .error.intrusion { + background-image: url("/image/hacked.png"); + } + .seriousError { + @extend .error; + border-width: 3px; + } + + ...produces:: + + .error, + .seriousError { + border: 1px red; + background-color: #fdd; + } + .error.intrusion, + .seriousError.intrusion { + background-image: url("/image/hacked.png"); + } + .seriousError { + border-width: 3px; + } #. **Sprites** (using `sprite-map()`) - Example:: - - @option compress: no; - $icons: sprite-map("sociable/*.png"); // contains sociable/facebook.png among others. - div { - 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); + Example:: + + @option compress: no; + $icons: sprite-map("sociable/*.png"); // contains sociable/facebook.png among others. + div { + 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); + } } - } - - ...generates a new sprite file and produces something like:: - - div { - background: url("/media/assets/u8Y7yEQL0UffAVw5rX7yhw.png?_=1298240989") 0px 0px no-repeat; - } - div .facebook { - width: 32px; - height: 32px; - background-position: 0px 0px; - } - div .twitter { - width: 32px; - height: 32px; - background-position: 0px -32px; - } - ... + + ...generates a new sprite file and produces something like:: + + div { + background: url("/media/assets/u8Y7yEQL0UffAVw5rX7yhw.png?_=1298240989") 0px 0px no-repeat; + } + div .facebook { + width: 32px; + height: 32px; + background-position: 0px 0px; + } + div .twitter { + width: 32px; + height: 32px; + background-position: 0px -32px; + } + ... #. **Interactive mode** - Example:: - - $ python scss.py --interactive - >>> @import "compass/css3" - >>> show() - ['functions', 'mixins', 'options', 'vars'] - >>> show(mixins) - ['apply-origin', - 'apply-transform', - ... - 'transparent'] - >>> show(mixins, transparent) - @mixin transparent() { - @include opacity(0); - } - >>> 1px + 5px - 6px - >>> _ + Example:: + + $ python scss.py --interactive + >>> @import "compass/css3" + >>> show() + ['functions', 'mixins', 'options', 'vars'] + >>> show(mixins) + ['apply-origin', + 'apply-transform', + ... + 'transparent'] + >>> show(mixins, transparent) + @mixin transparent() { + @include opacity(0); + } + >>> 1px + 5px + 6px + >>> _ Sass Sassy CSS ============== @@ -232,33 +244,43 @@ Compass framework path (I have `frameworks/compass/*.scss` and I have succesfully compiled some Compass using `python scss.py < myfile.css` the following `myfile.css`:: - @option compress: no; + @option compress: no; - $blueprint-grid-columns : 24; - $blueprint-grid-width : 30px; - $blueprint-grid-margin : 10px; - $font-color : #333; + $blueprint-grid-columns : 24; + $blueprint-grid-width : 30px; + $blueprint-grid-margin : 10px; + $font-color : #333; - @import "compass/reset"; - @import "compass/utilities"; - @import "blueprint"; + @import "compass/reset"; + @import "compass/utilities"; + @import "blueprint"; - // Stuff goes here... + // Stuff goes here... Benchmarks ========== - pyScss has been optimized for speed. Compiling **Compass 0.11.beta.2** - (`compass/doc-src/content/stylesheets/screen.scss`) - - ...using **Sass 3.1.0.alpha.221**:: +pyScss has been optimized for speed. Compiling **Compass 0.11.beta.2** +(`compass/doc-src/content/stylesheets/screen.scss`) + +...using **Sass 3.1.0.alpha.221**:: Compilation took 2.683s (w/o cache) Compilation took 1.35s (cached) - - ...using **pyScss 1.0 beta**:: + +...using **pyScss 1.0 beta**:: Compilation took 0.614s +Bug tracker +=========== +If you have any suggestions, bug reports or annoyances please report them to the +issue tracker at http://github.com/Kronuz/pyScss/issues + + +Contributing +============ +Development of pyScss happens at github: https://github.com/Kronuz/pyScss + License ======= MIT License. See *LICENSE* for details. @@ -266,15 +288,15 @@ http://www.opensource.org/licenses/mit-license.php Copyright ========= - Copyright (c) 2011 German M. Bravo (Kronuz) - *Bits of code in pyScss come from various projects:* - - Compass: - (c) 2009 Christopher M. Eppstein - http://compass-style.org/ - Sass: - (c) 2006-2009 Hampton Catlin and Nathan Weizenbaum - http://sass-lang.com/ - xCSS: - (c) 2010 Anton Pawlik - http://xcss.antpaw.org/docs/ +Copyright (c) 2011 German M. Bravo (Kronuz) +*Bits of code in pyScss come from various projects:* + +Compass: + (c) 2009 Christopher M. Eppstein + http://compass-style.org/ +Sass: + (c) 2006-2009 Hampton Catlin and Nathan Weizenbaum + http://sass-lang.com/ +xCSS: + (c) 2010 Anton Pawlik + http://xcss.antpaw.org/docs/ -- cgit v1.2.1