Mercurial > hg > mpiwgzen_wide
comparison sass/README.txt @ 0:a3750d724105 default tip
initital
| author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
|---|---|
| date | Tue, 02 Jun 2015 09:16:36 +0200 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a3750d724105 |
|---|---|
| 1 ABOUT SASS AND COMPASS | |
| 2 ---------------------- | |
| 3 | |
| 4 This directory includes Sass versions of Zen's CSS files. | |
| 5 | |
| 6 Sass is a language that is just normal CSS plus some extra features, like | |
| 7 variables, nested rules, math, mixins, etc. If your stylesheets are written in | |
| 8 Sass, helper applications can convert them to standard CSS so that you can | |
| 9 include the CSS in the normal ways with your theme. | |
| 10 | |
| 11 To learn more about Sass, visit: http://sass-lang.com | |
| 12 | |
| 13 Compass is a helper library for Sass. It includes libraries of shared mixins, a | |
| 14 package manager to add additional extension libraries, and an executable that | |
| 15 can easily convert Sass files into CSS. | |
| 16 | |
| 17 To learn more about Compass, visit: http://compass-style.org | |
| 18 | |
| 19 | |
| 20 DEVELOPING WITH SASS AND COMPASS | |
| 21 -------------------------------- | |
| 22 | |
| 23 To automatically generate the CSS versions of the scss while you are doing theme | |
| 24 development, you'll need to tell Compass to "watch" the sass directory so that | |
| 25 any time a .scss file is changed it will automatically place a generated CSS | |
| 26 file into your sub-theme's css directory: | |
| 27 | |
| 28 compass watch <path to your sub-theme's directory> | |
| 29 | |
| 30 If you are already in the root of your sub-theme's directory, you can simply | |
| 31 type: compass watch | |
| 32 | |
| 33 While using generated CSS with Firebug, the line numbers it reports will be | |
| 34 wrong since it will be showing the generated CSS file's line numbers and not the | |
| 35 line numbers of the source Sass files. To correct this problem, you can install | |
| 36 the FireSass plug-in into Firefox and then edit your sub-theme's config.rb file | |
| 37 to set: firesass = true | |
| 38 https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ | |
| 39 | |
| 40 | |
| 41 MOVING YOUR CSS TO PRODUCTION | |
| 42 ----------------------------- | |
| 43 | |
| 44 Once you have finished your sub-theme development and are ready to move your CSS | |
| 45 files to your production server, you'll need to tell sass to update all your CSS | |
| 46 files and to compress them (to improve performance). Note: the Compass command | |
| 47 will only generate CSS for .scss files that have recently changed; in order to | |
| 48 force it to regenerate all the CSS files, you can use the Compass' clean command | |
| 49 to delete all the generated CSS files. | |
| 50 | |
| 51 - Delete all CSS files by running: compass clean | |
| 52 - Edit the config.rb file in your theme's directory and uncomment this line by | |
| 53 deleting the "#" from the beginning: | |
| 54 #environment = :production | |
| 55 - Regenerate all the CSS files by running: compass compile | |
| 56 | |
| 57 And don't forget to turn on Drupal's CSS aggregation. :-) |