You are here

Home » API reference » Drupal Commons 7.3

_README.txt in Drupal Commons 7.3

Same filename in this branch
  1. 7.3 themes/commons/commons_origins/_README.txt
  2. 7.3 themes/commons/commons_origins/css/_README.txt
  3. 7.3 themes/commons/commons_origins/custom_layouts/_README.txt
  4. 7.3 themes/commons/commons_origins/sass/_README.txt
  5. 7.3 themes/commons/commons_origins/images/_README.txt

About SASS and Compass
----------------------

This directory includes Sass versions of AT's CSS files. All files use the SCSS
syntax.

Sass is a language that is just normal CSS plus some extra features, like
variables, nested rules, math, mixins, etc. If your stylesheets are written in
Sass, helper applications can convert them to standard CSS so that you can
include the CSS in the normal ways with your theme.

To learn more about Sass, visit: http://sass-lang.com

Compass is a helper library for Sass. It includes libraries of shared mixins, a
package manager to add additional extension libraries, and an executable that
can easily convert Sass files into CSS.

To learn more about Compass, visit: http://compass-style.org



Developing with SASS and Compass
--------------------------------

To automatically generate the CSS versions of the scss while you are doing theme
development, you'll need to tell Compass to "watch" the sass directory so that
any time a .scss file is changed it will automatically place a generated CSS
file into your sub-theme's css directory:

  compass watch <path to your sub-theme's directory>

  If you are already in the root of your sub-theme's directory, you can simply
  type:  compass watch

While using generated CSS with Firebug, the line numbers it reports will be
wrong since it will be showing the generated CSS file's line numbers and not the
line numbers of the source Sass files. To correct this problem, you can install
the FireSass plug-in into Firefox.
  https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

If you do not want to use Ruby and the command line you can check out the Sassy
project for Drupal: http://drupal.org/project/sassy



Moving to Production
--------------------

Once you have finished your sub-theme development and are ready to move your CSS
files to your production server, you'll need to tell sass to update all your CSS
files and to compress them (to improve performance). Note: the Compass command
will only generate CSS for .scss files that have recently changed; in order to
force it to regenerate all the CSS files, you can use the Compass' clean command
to delete all the generated CSS files.

- Delete all CSS files by running: compass clean
- Edit the config.rb file in your theme's directory and uncomment this line by
  deleting the "#" from the beginnning:
    #environment = :production
- Regenerate all the CSS files by running: compass compile

And don't forget to turn on Drupal's CSS aggregation. :-)

File

themes/commons/commons_origins/sass/_README.txt
View source 
  1. 

  2. 

  3. About SASS and Compass

  4. ----------------------

  5. 

  6. This directory includes Sass versions of AT's CSS files. All files use the SCSS

  7. syntax.

  8. 

  9. Sass is a language that is just normal CSS plus some extra features, like

  10. variables, nested rules, math, mixins, etc. If your stylesheets are written in

  11. Sass, helper applications can convert them to standard CSS so that you can

  12. include the CSS in the normal ways with your theme.

  13. 

  14. To learn more about Sass, visit: http://sass-lang.com

  15. 

  16. Compass is a helper library for Sass. It includes libraries of shared mixins, a

  17. package manager to add additional extension libraries, and an executable that

  18. can easily convert Sass files into CSS.

  19. 

  20. To learn more about Compass, visit: http://compass-style.org

  21. 

  22. 

  23. 

  24. Developing with SASS and Compass

  25. --------------------------------

  26. 

  27. To automatically generate the CSS versions of the scss while you are doing theme

  28. development, you'll need to tell Compass to "watch" the sass directory so that

  29. any time a .scss file is changed it will automatically place a generated CSS

  30. file into your sub-theme's css directory:

  31. 

  32.   compass watch 

  33. 

  34.   If you are already in the root of your sub-theme's directory, you can simply

  35.   type:  compass watch

  36. 

  37. While using generated CSS with Firebug, the line numbers it reports will be

  38. wrong since it will be showing the generated CSS file's line numbers and not the

  39. line numbers of the source Sass files. To correct this problem, you can install

  40. the FireSass plug-in into Firefox.

  41.   https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

  42. 

  43. If you do not want to use Ruby and the command line you can check out the Sassy

  44. project for Drupal: http://drupal.org/project/sassy

  45. 

  46. 

  47. 

  48. Moving to Production

  49. --------------------

  50. 

  51. Once you have finished your sub-theme development and are ready to move your CSS

  52. files to your production server, you'll need to tell sass to update all your CSS

  53. files and to compress them (to improve performance). Note: the Compass command

  54. will only generate CSS for .scss files that have recently changed; in order to

  55. force it to regenerate all the CSS files, you can use the Compass' clean command

  56. to delete all the generated CSS files.

  57. 

  58. - Delete all CSS files by running: compass clean

  59. - Edit the config.rb file in your theme's directory and uncomment this line by

  60.   deleting the "#" from the beginnning:

  61.     #environment = :production

  62. - Regenerate all the CSS files by running: compass compile

  63. 

  64. And don't forget to turn on Drupal's CSS aggregation. :-)

  65. 

  66. 

  67.