|
1
|
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
|
