css-workflow with sass and Browsersync
css-workflow is a SASS & Browsersync startup script, which enables you to startup your css-development process.
Compiling on Windows machines requires the node-gyp prerequisites.
npm i css-workflow -g
css-workflow
this would use our default configuration, so you have to specify some options
| Option | Info |
|---|---|
| --cssRootFolder | The root folder of your local css (scss) files |
| --cssIn | scss file |
| --cssOut | css file(s) |
| --browsersyncRootFolder | the static root folder used by the web-proxy (browser-sync) |
| --browsersyncWatchFiles | files which triggers a browser-sync |
| --browsersyncUpstreamHttpServer | the upstream http Server |
Activate CSS-Sourcemaps in the Developer settings
You can use Chrome Workspaces to make changes directly from Chrome. You can play with css settings in the CSS Properties Explorer, this changes aren´t saved. To save a file simply open the scss file under Chrome (there clickable filename in the CSS Properties Explorer) and save it.