Skip to content
This repository has been archived by the owner on May 31, 2023. It is now read-only.

Latest commit

 

History

History
74 lines (47 loc) · 1.72 KB

README.md

File metadata and controls

74 lines (47 loc) · 1.72 KB

Sass Edit in Browser

Grunt

install npm modules from package.json by running the command:

npm install

Grunt is used to compile sass file.

In Gruntfile.js the options of compass task will also generate a source map file for the compiled sass.

Start grunt watch task to compile sass file every time it changes:

grunt watch

Bower

Bower is to illustrate the installation of Bootstrap 3 in a specific folder set in .bowerrc file.

Run bower whith the command:

bower install

Node LiveReload

LiveReload server watchs public folder for changes so the browser can refresh the page.

Install node-livereload globally by running the command:

npm install -g livereload

Run livereload server:

node server.js

In case the port 35729 is not available to use you'll see the error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: listen EADDRINUSE

The page in public/index.html file listen to the server via the tag:

<script src="http://localhost:35729/livereload.js"></script>

The browser

The browsers I tested are Firefox 35, Chrome 40 and Opera 29.

By inspecting the page you will see to css rule source file is style.scss, by clicking on the file name you'll be able to edit it.

IMG1

After saving the file grunt will execute watch task to regenerate the css files and livereload server will notify the browser about this changes and reload the css or refresh the entire page.

IMG2