Vim server for live CSS editing
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
lib Fix error with null rules list Aug 7, 2015
static Fix things Aug 7, 2015
README.md Give up on multiplexing http/netbeans Jan 14, 2014
package.json Give up on multiplexing http/netbeans Jan 14, 2014

README.md

vim-scissors

Live edit CSS (and LESS) in Vim.

Usage

  • Add the script to your web page:

<script src="http://localhost:3220/scissors.js"></script>
```
  • Start the vim-scissors server:

    npm start

  • Open the page in your browser.

  • Execute :nbs in vim (or run vim -nb)

    Your CSS/LESS files should then open in the vim session.

    For best results, run vim from your web root directory.

  • Edit styles in vim. Watch the changes appear in the browser.

  • Rejoice!

Slightly More Advanced Usage

Run vim-scissors on your web server instead of localhost, to make it easier to use from browsers on multiple machines.

  • Add the full snippet to your web pages:

     <script>document.write('<script src="http://' + (location.host ||
     	'localhost').split(':')[0] +
     	':3220/scissors.js"></' + 'script>')</script>
    
  • Run vim-scissors from the machine that is serving your website.

    npm start

  • Connect vim using :nbs:[host] where host is the domain name of the server running vim-scissors. It will default to connect on port 3219.

Other

  • You may specify a site or filename filter in the nbs connection command, for situations where you are using vim-scissors for more than one site. Give a regexp as the password. Example: :nbs:::^[^.] will open only stylesheets whose name does not begin with a dot.

Todo

  • Handle more CSS, including imports.
  • Make a browser extension to add the script tag, or integrate with an existing extension, such as LiveReload.
  • Factor out code common to both client and server.
  • Improve cross-browser compatibility

License

MIT License