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.