Live CSS

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.