| OLD | NEW |
| (Empty) |
| 1 Python-scss | |
| 2 =========== | |
| 3 | |
| 4 Python-scss is SCSS_ compiler for python. Documentation available at pypi_ or gi
thub_. | |
| 5 This is part of zeta-library_. | |
| 6 | |
| 7 .. contents:: | |
| 8 | |
| 9 | |
| 10 Features | |
| 11 ======== | |
| 12 Python-scss has most of the funcitonality in Sass SCSS_ 3.2 and more. It support
s: | |
| 13 | |
| 14 * **Nested rules** | |
| 15 * **Keyword arguments** | |
| 16 * **Mixins**: ``@mixin``, ``@include`` | |
| 17 * **Functions**: ``@function``, ``@return`` | |
| 18 * **Inheritance**: ``@extend`` | |
| 19 * **Conditions**: ``@if``, ``@else``, ``@if else`` | |
| 20 * **Loops**: ``@for`` | |
| 21 * **Variables**: ``$``, ``@variables``, ``@vars`` | |
| 22 * **Images**: ``image-url``, ``image-width``, ``image-height``, .. | |
| 23 * **Embedded inline images**: ``inline-image`` | |
| 24 * **Colors handling**: ``adjust-color()``, ``scale-color()``, ``opacify()``/``tr
ansparentize()``, ``lighten()``/``darken()``, ``mix()``, ... | |
| 25 * **Math functions**: ``sin()``, ``cos()``, ``tan()``, ``round()``, ``ceil()``,
``floor()``, ``pi()``, ... | |
| 26 * **Options**: ``@option compress:true, sort:false;``, ``@option comments:false;
`` | |
| 27 * **Compass_ helpers**: ``enumerate``, ``type-of``, ... | |
| 28 * **Sorting declarations**: in `Zen sorting order`_ | |
| 29 | |
| 30 .. note:: | |
| 31 For ``@import`` support you can use zeta-library_, python compass alternative
. | |
| 32 | |
| 33 Zeta-library supported ``@import url(path or http)``, but all static files cs
s, scss. | |
| 34 | |
| 35 Also zeta support js import ``require( '../jquery.js' );``. Zeta allow you co
ntrol all your static files. | |
| 36 | |
| 37 | |
| 38 Requirements | |
| 39 ============= | |
| 40 - python >= 2.5 | |
| 41 - pyparsing >= 1.5.5 | |
| 42 | |
| 43 | |
| 44 Installation | |
| 45 ============ | |
| 46 **python-scss** should be installed using pip or setuptools: :: | |
| 47 | |
| 48 pip install scss | |
| 49 | |
| 50 easy_install scss | |
| 51 | |
| 52 | |
| 53 Usage | |
| 54 ===== | |
| 55 | |
| 56 #. **From python source code**: :: | |
| 57 | |
| 58 from scss import parser | |
| 59 | |
| 60 file_path = path_to_file | |
| 61 src = open( file_path ).read() | |
| 62 | |
| 63 # from file | |
| 64 print parser.load( 'file_path' ) | |
| 65 | |
| 66 # from string | |
| 67 print parser.parse( 'src' ) | |
| 68 | |
| 69 # Create parser object | |
| 70 p = parser.Stylesheet( options=dict( compress=True ) ) | |
| 71 print p.loads( src ) | |
| 72 p.load( file_path ) | |
| 73 print p | |
| 74 | |
| 75 #. **From command line**: :: | |
| 76 | |
| 77 $ scss --help | |
| 78 Usage: scss [OPTION]... [INFILE] [OUTFILE] | |
| 79 | |
| 80 Compile INFILE or standard input, to OUTFILE or standard output. | |
| 81 | |
| 82 Options: | |
| 83 --version show program's version number and exit | |
| 84 -h, --help show this help message and exit | |
| 85 -c, --cache Create and use cache file. Only for files. | |
| 86 -i, --interactive Run in interactive shell mode. | |
| 87 -m, --compress Compress css output. | |
| 88 -w WATCH, --watch=WATCH | |
| 89 Watch files or directories for changes. The location | |
| 90 of the generated CSS can be set using a colon: | |
| 91 scss -w input.scss:output.css | |
| 92 -S, --no-sorted Do not sort declaration. | |
| 93 -C, --no-comments Clear css comments. | |
| 94 -W, --no-warnings Disable warnings. | |
| 95 | |
| 96 #. **In interactive mode**: :: | |
| 97 | |
| 98 scss -i | |
| 99 | |
| 100 >>> 25px + 1.5em | |
| 101 | |
| 102 | |
| 103 Changes | |
| 104 ======= | |
| 105 | |
| 106 Make sure you`ve read the following document if you are upgrading from previous
versions of scss: | |
| 107 | |
| 108 http://packages.python.org/scss/changes.html | |
| 109 | |
| 110 | |
| 111 Examples | |
| 112 ======== | |
| 113 | |
| 114 #. **Nested Rules** | |
| 115 Example:: | |
| 116 | |
| 117 .selector { | |
| 118 a { | |
| 119 display: block; | |
| 120 } | |
| 121 strong { | |
| 122 color: blue; | |
| 123 } | |
| 124 } | |
| 125 | |
| 126 ...produces:: | |
| 127 | |
| 128 .selector a { | |
| 129 display: block} | |
| 130 | |
| 131 .selector strong { | |
| 132 color: blue} | |
| 133 | |
| 134 | |
| 135 #. **Variables** | |
| 136 Example:: | |
| 137 | |
| 138 $main-color: #ce4dd6; | |
| 139 $style: solid; | |
| 140 $side: bottom; | |
| 141 #navbar { | |
| 142 border-#{$side}: { | |
| 143 color: $main-color; | |
| 144 style: $style; | |
| 145 } | |
| 146 } | |
| 147 | |
| 148 ...produces:: | |
| 149 | |
| 150 #navbar { | |
| 151 border-bottom-color: #ce4dd6; | |
| 152 border-bottom-style: solid} | |
| 153 | |
| 154 #. **Mixins** | |
| 155 Example:: | |
| 156 | |
| 157 @mixin rounded($side, $radius: 10px) { | |
| 158 border-#{$side}-radius: $radius; | |
| 159 -moz-border-radius-#{$side}: $radius; | |
| 160 -webkit-border-#{$side}-radius: $radius; | |
| 161 } | |
| 162 #navbar li { @include rounded(top); } | |
| 163 #footer { @include rounded(top, 5px); } | |
| 164 #sidebar { @include rounded(left, 8px); } | |
| 165 | |
| 166 ...produces:: | |
| 167 | |
| 168 #navbar li { | |
| 169 -moz-border-radius-top: 10px; | |
| 170 -webkit-border-top-radius: 10px; | |
| 171 border-top-radius: 10px} | |
| 172 | |
| 173 #footer { | |
| 174 -moz-border-radius-top: 5px; | |
| 175 -webkit-border-top-radius: 5px; | |
| 176 border-top-radius: 5px} | |
| 177 | |
| 178 #sidebar { | |
| 179 -moz-border-radius-left: 8px; | |
| 180 -webkit-border-left-radius: 8px; | |
| 181 border-left-radius: 8px} | |
| 182 | |
| 183 #. **Extend** (using `@extend`) | |
| 184 Example:: | |
| 185 | |
| 186 .error { | |
| 187 border: 1px #f00; | |
| 188 background-color: #fdd; | |
| 189 } | |
| 190 .error.intrusion { | |
| 191 background-image: url("/image/hacked.png"); | |
| 192 } | |
| 193 .seriousError { | |
| 194 @extend .error; | |
| 195 border-width: 3px; | |
| 196 } | |
| 197 | |
| 198 ...produces:: | |
| 199 | |
| 200 .error, .seriousError { | |
| 201 background-color: #fdd; | |
| 202 border: 1px #f00} | |
| 203 | |
| 204 .error .intrusion, .seriousError .intrusion { | |
| 205 background-image: url('/image/hacked.png')} | |
| 206 | |
| 207 .seriousError { | |
| 208 border-width: 3px} | |
| 209 | |
| 210 #. **Interactive mode** | |
| 211 Example:: | |
| 212 | |
| 213 $ python scss.py --interactive | |
| 214 >>> 25px + 1.5em | |
| 215 44.5px | |
| 216 >>> lighten(rgba(130,130,130,.4),10%) | |
| 217 rgba(155,155,155,0.40) | |
| 218 >>> .rule { test: red; } | |
| 219 .rule { | |
| 220 test: red } | |
| 221 >>> _ | |
| 222 | |
| 223 | |
| 224 Options | |
| 225 ======= | |
| 226 | |
| 227 Python-scss has the following options: | |
| 228 | |
| 229 - **compress**: Compress ouput css, default is False | |
| 230 | |
| 231 - **cache**: Precache compile result, default is False | |
| 232 | |
| 233 - **comments**: Leave css comments, default is True | |
| 234 | |
| 235 - **sort**: Sort declaration, default is True | |
| 236 Declaration sorted in `Zen sorting order`_ | |
| 237 | |
| 238 - **warn**: Enable or disable warnings: unwnown mixin, declaration name, extend
ruleset, default is True | |
| 239 | |
| 240 Option can be defined... | |
| 241 | |
| 242 #. from command line: :: | |
| 243 | |
| 244 scss -m -S file.scss | |
| 245 | |
| 246 #. from python: :: | |
| 247 | |
| 248 parser = Stylesheet( options=dict( compress=True ) ) | |
| 249 | |
| 250 #. from scss source: :: | |
| 251 | |
| 252 @option compress: true, sort: false; | |
| 253 | |
| 254 | |
| 255 .. note:: | |
| 256 python-scss is still at early stages of development | |
| 257 | |
| 258 | |
| 259 Bug tracker | |
| 260 =========== | |
| 261 | |
| 262 If you have any suggestions, bug reports or | |
| 263 annoyances please report them to the issue tracker | |
| 264 at https://github.com/klen/python-scss/issues | |
| 265 | |
| 266 | |
| 267 Contributing | |
| 268 ============ | |
| 269 | |
| 270 Development of python-scss happens at github: https://github.com/klen/python-scs
s | |
| 271 | |
| 272 * klen_ (Kirill Klenov) | |
| 273 | |
| 274 | |
| 275 License | |
| 276 ======= | |
| 277 | |
| 278 Licensed under a `GNU lesser general public license`_. | |
| 279 | |
| 280 | |
| 281 Copyright | |
| 282 ========= | |
| 283 | |
| 284 Copyright (c) 2011 Kirill Klenov (horneds@gmail.com) | |
| 285 | |
| 286 Compass_: | |
| 287 (c) 2009 Christopher M. Eppstein | |
| 288 http://compass-style.org/ | |
| 289 | |
| 290 SCSS_: | |
| 291 (c) 2006-2009 Hampton Catlin and Nathan Weizenbaum | |
| 292 http://sass-lang.com/ | |
| 293 | |
| 294 | |
| 295 Note | |
| 296 ==== | |
| 297 | |
| 298 **Your feedback are welcome!** | |
| 299 | |
| 300 .. _zeta-library: http://github.com/klen/zeta-library | |
| 301 .. _GNU lesser general public license: http://www.gnu.org/copyleft/lesser.html | |
| 302 .. _SCSS: http://sass-lang.com | |
| 303 .. _compass: http://compass-style.org/ | |
| 304 .. _python scss git: http://packages.python.org/scss/ | |
| 305 .. _pypi: http://packages.python.org/scss/ | |
| 306 .. _github: https://github.com/klen/python-scss | |
| 307 .. _Zen sorting order: http://code.google.com/p/zen-coding/wiki/ZenCSSProperties
En#Sorting_Methods | |
| 308 .. _klen: https://klen.github.com | |
| OLD | NEW |