The Utility Pro theme developer version includes tools to automate and manage your local web development environment. Once you’ve followed the documentation to install and activate the tools, SASS will run locally to compile your CSS.
However, when you open your developer tools to inspect a local dev site, the inspector will likely refer to the compiled ‘style.css’ file, not the source SCSS partial file. To create that connection, you must enable source maps for your theme.
For those relatively new to SASS, the following instructions will save you time and needless grief when troubleshooting and correcting your CSS. To enable source maps in the Utility Pro Developer Edition, you’ll need to change a few settings in your developer tools and the ‘gruntfile.js’ file included in the Utility Pro theme root directory.
The following instructions refer to Chrome Developer Tools (CDT). The setting changes are probably comparable for Firefox and Safari.
- In the Chrome browser, open Chrome Developer Tools (CDT) (option + command + I on a Mac).
- In the upper-right corner of the CDT window, select the ‘kebob’ (the three vertically-stacked dots). The message ‘Customize and control DevTools’ will appear when the cursor hovers over the ‘kebob’.
- Select ‘Settings’ from the fly-out menu.
- In the Settings menu, select ‘General -> Sources -> Enable Source Maps’ and the submenu option ‘auto-reload generated CSS’.
- Close the Settings pane. Settings changes are saved automatically once selected.
Next, the source maps option in the theme file ‘gruntfile.js’ must be changed to allow the creation of source maps. The API documentation for grunt-contrib-sass can found on GitHub.
In your theme ‘grunt file.js’, change your sass options as follows:
- ‘sourcemap=auto’: true. This setting provides relative paths to source-mapped files where possible; file URIs elsewhere. Note: If this is set to ‘sourcemap=none’, no source maps will be returned.
- lineNumbers: true. Emits (outputs) comments in the generated CSS indicating the corresponding source line.
- style: expanded. This setting provides control over how the CSS is output.
- debugInfo: false — default: false. Set to ‘true’ if you use the FireSass Firebug plugin. Otherwise set to ‘false’
- compass: false — default: false. Enables Compass imports and loads SCSS project configuration file (config.rb located close to the gruntfile.js). Compass is not needed with the developer version of Utility-Pro, so leave the default setting.
When a sourcemap is created in Utility Pro, a ‘style.css.map’ file will appear inside the Utility Pro theme root directory. Each CSS selector in your developer tools will return the source SCSS partial instead of compiled CSS.
Robert Gadon is a WordPress enthusiast and aspiring web developer who uses the Utility Pro developer edition (and thinks you should too!). He happily shares this documentation so that others can get quickly get up and running with SCSS in Utility Pro. Robert lives in St. Louis, Missouri.