Live CSS
This module allows you to edit CSS and LESS code directly on your website and save the changes to the original files. It provides a live preview of your edits as you make them, and supports both CSS and LESS stylesheets.
Edit CSS live within the page, and save the changes back to any css file if you have write access.
Additionally, this module enables the ability to render and perform live editing of LESS stylesheets, included just like css files. Users without the live editing permission will still see properly rendered LESS displayed.
Live Editing
Configuration
- Enable the 'Edit CSS' permission.
- Check that php has write access to the necessary css files.
- Ensure CSS caching is disabled
Usage
- Once enabled, an 'Edit CSS' tab will show on the side of the page.
- Select the CSS file to edit from the drop down and start making changes. Any css adjustments will be reflected live on the page.
- Once complete, select 'Save' to save the changes back to the site.
Live LESS Editing
Usage
- Create a .less file.
- Include the .less file in the .info file or with drupal_add_css, as usual.
- Select the .less file in Live CSS editor to edit the LESS code live on the page, as with CSS.
Server parsing of LESS with the LESS Module
With Live CSS, the LESS rendering is always parsed through JavaScript on the client. To allow LESS parsing to run on the server and also to work with CSS compression, use the LESS module (http://drupal.org/project/less) instead.
The inclusion format of LESS files is the same in both the Live CSS and LESS modules. When using the LESS module disable the LESS support from the Live CSS admin option first. Note that the LESS module will not work without disabling this option or disabling Live CSS entirely.
LESS syntax is very similar to SASS. Read the docs here.