Setting up Less in JetBrains: Ubuntu

This is a quick guide on setting up the Less preprocessor to automatically create .css files from .less files. I'll show you how to do this in a JetBrains IDE running on Ubuntu OS.

• Make sure that you have the latest JetBrains IDE installed. The steps will be similar for both PHPStorm and WebStorm
• Open Terminal and install NodeJS: sudo apt install nodejs
• Install npm: sudo apt install npm
• Run the following command: sudo ln -s /usr/bin/nodejs /usr/bin/node
• Get the less module. In Terminal type in the following command: sudo npm install less -g
• Open your JetBrains IDE and create a new project or open an existing one.
• Click File -> Settings.
• Under the Languages & Frameworks tab, select Node.js and NPM.
• Node interpreter should be set to /usr/bin/node
• Click the Enable button to enable Node.js and then click Apply
• Do not close the Settings window.
• Navigate to Tools (category right under Languages & Frameworks)
• Click File Watchers
• Click the Green Plus and select Less
• Enter the following Program location: /usr/local/bin/lessc
• Arguments should be set to: --no-color $FileName$
• Output paths to refresh: $FileNameWithoutExtension$.css
• Under Other Options, the Working Directory should be set to: $FileDir$
• Click OK, Apply and exit the Settings Menu. 

To test it, 

• create a new file by right clicking on the directory and selecting New -> File. 
• Name the file main.less.
• Enter some Less to see if it works. For example:

@font-size:10px;@font-color:red;
body {
  background: red;  font-size: @font-size;}

.test-class {
  color:@font-color;  border: 1px solid;  .border-color(red);}

.inheritance:extend(.test-class) {
  background-color:white;}

.border-color(@custom-color) {
  border-color: @custom-color;}

nav {
  padding:20px;  margin:10px;
  ul {
    list-style:none;    background-color: black;
    li {
      padding:10px;
      a {
        text-decoration: none;
        &:hover {
          color:white;        }
      }
    }
  }
}

That's it. Once you save the .less file you'll notice the same .css file created. In this case, a main.css file.

body {
  background: red;  font-size: 10px;}
.test-class,.inheritance {
  color: red;  border: 1px solid;  border-color: red;}
.inheritance {
  background-color: white;}
nav {
  padding: 20px;  margin: 10px;}
nav ul {
  list-style: none;  background-color: black;}
nav ul li {
  padding: 10px;}
nav ul li a {
  text-decoration: none;}
nav ul li a:hover {
  color: white;}