Skip to main content

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;}

Comments

Post a Comment

Popular posts from this blog

Beginner Java Exercise: Sentinel Values and Do-While Loops

In my previous post on while loops, we used a loop-continuation-condition to test the arguments. In this example, we'll loop at a sentinel-controlled loop. The sentinel value is a special input value that tests the condition within the while loop. To jump right to it, we'll test if an int variable is not equal to 0. The data != 0 within the while (data != 0) { ... } is the sentinel-controlled-condition. In the following example, we'll keep adding an integer to itself until the user enters 0. Once the user enters 0, the loop will break and the user will be displayed with the sum of all of the integers that he/she has entered. As you can see from the code above, the code is somewhat redundant. It asks the user to enter an integer twice: Once before the loop begins, and an x amount of times within the loop (until the user enters 0). A better approach would be through a do-while loop. In a do-while loop, you "do" something "while" the condition...
13 comments
Read more

Programming Language Concepts Test Questions/Answers

One of the easiest methods that I use to learn new topics is by creating notes on the subject and then by turning those notes into questions and answers. Remembering answers to questions just seems more natural. I was able to memorize 323 questions and answers in a matter of a couple of days. I wanted to start doing this for some topics that I find pretty interesting. To begin, here are some questions and answers to Programming Language Concepts (PLC). I'm reading your mind right now and the answer is yes, there will be more. 1. Name 3 reasons for studying PLC. - Better understanding of current programming languages - Advancement of computing - Increased capability to express ideas - Increased capability to learn new programming language. - Better understanding of which programming language to choose.  2. Name the 5 programming domains and languages best suited for each. - Scientific (Fortran, ALGOL 60) - Business (COBOL) - AI (Lisp, Scheme, Prolog) - Web (PHP, ...
12 comments
Read more

Creating your own ArrayList in Java

Wanted to show that certain data structures in Java can be created by you. In this example, we'll go ahead and create an ArrayList data structure that has some of the methods that the built in ArrayList class has. We'll create 2 constructors: The default constructor that creates an ArrayList with a default size of 10. Constructor that allows an initial size to be passed to the array. We'll also create a number of methods: void add(Object x);  A method that allows you to place an Object at the end of the ArrayList. void add(int index, Object x);  A method that allows you to place a value at a given location. Object get(int index):  Allows you to retrieve a value of the arrayList array from a given location. int size();  Allows you to get the number of elements currently in the Arraylist. boolean isEmpty();  Tests to see if the Arraylist is empty. boolean isIn(Object x);  A method that sees if a particular object exist in the arrayList. int ...
49 comments
Read more