1 |
0484f1af
|
Andreas Kohlbecker
|
diff --git a/STARTERKIT/config.rb b/STARTERKIT/config.rb
|
2 |
|
|
index b3e483a..f936b38 100644
|
3 |
|
|
--- a/STARTERKIT/config.rb
|
4 |
|
|
+++ b/STARTERKIT/config.rb
|
5 |
|
|
@@ -11,7 +11,20 @@
|
6 |
|
|
environment = :development
|
7 |
|
|
#environment = :production
|
8 |
|
|
|
9 |
|
|
-# In development, we can turn on the FireSass-compatible debug_info.
|
10 |
|
|
+# If in development (set above), we can turn on the sourcemap file generation.
|
11 |
|
|
+# Requires sass 3.3+ and compass 1.0.1+
|
12 |
|
|
+# Determine version from command line: sass --version && compass --version
|
13 |
|
|
+sourcemap = false
|
14 |
|
|
+#sourcemap = true
|
15 |
|
|
+
|
16 |
|
|
+# Alternative development debugging methods
|
17 |
|
|
+# If in development (above), we can enable line_comments for FireCompass plugin.
|
18 |
|
|
+# Requires Firebug plugin and FireCompass plugin
|
19 |
|
|
+firecompass = false
|
20 |
|
|
+#firecompass = true
|
21 |
|
|
+
|
22 |
|
|
+# If in development (above), we can enable debug_info for the FireSass plugin.
|
23 |
|
|
+# Requires Firebug plugin and Firesass plugin
|
24 |
|
|
firesass = false
|
25 |
|
|
#firesass = true
|
26 |
|
|
|
27 |
|
|
@@ -51,6 +64,14 @@ relative_assets = true
|
28 |
|
|
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
29 |
|
|
# line_comments = false
|
30 |
|
|
|
31 |
|
|
+# Pass options to sass. For development and sourcemap variable is true (above),
|
32 |
|
|
+# then pass the "--sourcemap" option flag to compass/sass.
|
33 |
|
|
+sass_options = (environment == :development && sourcemap == true) ? {:sourcemap => true} : {}
|
34 |
|
|
+
|
35 |
|
|
+# Pass options to sass. For development, we turn on the FireCompass-compatible
|
36 |
|
|
+# line_comments if the firecompass config variable above is true.
|
37 |
|
|
+sass_options = (environment == :development && firecompass == true) ? {:line_comments => true} : {}
|
38 |
|
|
+
|
39 |
|
|
# Pass options to sass. For development, we turn on the FireSass-compatible
|
40 |
|
|
# debug_info if the firesass config variable above is true.
|
41 |
|
|
sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}
|
42 |
|
|
diff --git a/STARTERKIT/sass/README.txt b/STARTERKIT/sass/README.txt
|
43 |
|
|
index 0fc8f2f..ac3422e 100644
|
44 |
|
|
--- a/STARTERKIT/sass/README.txt
|
45 |
|
|
+++ b/STARTERKIT/sass/README.txt
|
46 |
|
|
@@ -22,20 +22,48 @@ DEVELOPING WITH SASS AND COMPASS
|
47 |
|
|
|
48 |
|
|
To automatically generate the CSS versions of the scss while you are doing theme
|
49 |
|
|
development, you'll need to tell Compass to "watch" the sass directory so that
|
50 |
|
|
-any time a .scss file is changed it will automatically place a generated CSS
|
51 |
|
|
-file into your sub-theme's css directory:
|
52 |
|
|
+any time a .scss file is changed it will automatically generate a CSS file in
|
53 |
|
|
+your sub-theme's css directory:
|
54 |
|
|
|
55 |
|
|
compass watch <path to your sub-theme's directory>
|
56 |
|
|
|
57 |
|
|
If you are already in the root of your sub-theme's directory, you can simply
|
58 |
|
|
type: compass watch
|
59 |
|
|
|
60 |
|
|
-While using generated CSS with Firebug, the line numbers it reports will be
|
61 |
|
|
-wrong since it will be showing the generated CSS file's line numbers and not the
|
62 |
|
|
-line numbers of the source Sass files. To correct this problem, you can install
|
63 |
|
|
-the FireSass plug-in into Firefox and then edit your sub-theme's config.rb file
|
64 |
|
|
-to set: firesass = true
|
65 |
|
|
- https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
|
66 |
|
|
+While using generated CSS with Firebug, the line numbers it reports will not
|
67 |
|
|
+match the .scss file, since it references the generated CSS file's lines, not
|
68 |
|
|
+the line numbers of the "source" sass files. How then do we debug? Sourcemaps to
|
69 |
|
|
+the rescue! To find the oringial, newer browsers have support for sourcemap
|
70 |
|
|
+files (*.map). These files are used by the built-in development tools of newer
|
71 |
|
|
+browsers to map the generated line to the SCSS source. When in development mode,
|
72 |
|
|
+Zen can be set to generate sourcemap files. Edit config.rb, and uncomment:
|
73 |
|
|
+
|
74 |
|
|
+ sourcemap=true
|
75 |
|
|
+
|
76 |
|
|
+
|
77 |
|
|
+Enabling and using sourcemap files (*.map) in your browser
|
78 |
|
|
+
|
79 |
|
|
+In short, Open Developer tools, go to settings, and enable an option to the
|
80 |
|
|
+effect of: 'view original sources' or 'Enable CSS source maps'.
|
81 |
|
|
+
|
82 |
|
|
+* Firefox: https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
|
83 |
|
|
+* Chrome: https://developer.chrome.com/devtools/docs/css-preprocessors#toc-enabling-css-source-maps
|
84 |
|
|
+* IE: http://msdn.microsoft.com/en-US/library/ie/dn255007%28v=vs.85%29#source_maps
|
85 |
|
|
+
|
86 |
|
|
+
|
87 |
|
|
+Browser Plug-ins
|
88 |
|
|
+
|
89 |
|
|
+An alternative method is to install a browser plug-in, such as FireCompass or
|
90 |
|
|
+the older FireSass plug-in into Firefox. Then you'll need to edit your
|
91 |
|
|
+sub-theme's config.rb file to uncomment and set either:
|
92 |
|
|
+
|
93 |
|
|
+ firesass = true
|
94 |
|
|
+ firecompass = true
|
95 |
|
|
+
|
96 |
|
|
+Finally, you'll need to install the appropriate plug-in:
|
97 |
|
|
+
|
98 |
|
|
+ Firesass: https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug
|
99 |
|
|
+ FireCompass: https://addons.mozilla.org/en-US/firefox/addon/firecompass-for-firebug
|
100 |
|
|
|
101 |
|
|
|
102 |
|
|
MOVING YOUR CSS TO PRODUCTION
|