Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Vim server for live CSS editing
JavaScript CSS
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
static
README.md
package.json

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

Something went wrong with that request. Please try again.