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