mzur/gedit-with-less-css.md

## gedit-with-less-css.md

      
    Raw
  

              gedit-with-less-css.md
            
          
    #How to set up gedit with automatic LESS CSS compiling
##Install the compiler
Install the command line LESS compiler. For example in Ubuntu use sudo apt-get install node-less. Alternatively you can install it using the Node Package Manager sudo atp-get install npm and then npm install -g less for the guaranteed newest version.
Now you are able to compile LESS files using lessc my_less_file.less my_css_file.css but this really sucks if you are setting up the CSS for a new website and have to compile it frequently.
Fortunately there is gedit; the lightweight text editor of your choice ;-)
##Set up gedit
First of all you have to activate the External Tools plugin. Just set the respective tick at Edit/Preferences/Plugins/External Tools. Now you are able to set up custom scripts to make your coding life much easier.
Navigate to Tools/Manage External Tools. Add a new tool with the + button at the bottom of the tool list and insert the following bash script:
#!/bin/sh
x="$GEDIT_CURRENT_DOCUMENT_NAME"
y=${x%.less}
lessc -x "$GEDIT_CURRENT_DOCUMENT_PATH" ${y##*/}.css
This script fetches the name of the current document, removes the .less suffix, adds .css and calls lessc with the right arguments. If you don't like to have minified CSS, remove the -x option for lessc. Untortunately gedit doesn't seem to care if you try to make this tool language specific so you have to take care on which documents you use it.
Now you should set a custom shortcut key (for example F2). You should not overwrite existing shortcuts because it's pretty nasty to retrieve the defaults once they are changed. Finally you should set the save option of the tool to Current document.
##Done
Congratulations! Now you have made your awesome gedit even more awesome for your web coding. Every time you hit the shortcut key, gedit will save the document and set up a compiled CSS file in the same directory.