How create HTML project in Netbeans having a connection to the LESS compilator for CSS file?

In this topic we create HTML project in Netbeans 8.2. This project will be use LESS compilator for CSS file. First select from menu File->New Project.
Next select from Categories section HTML5/JS Application.
Click the Next button.
In the Project Name field write name for your project:
Click the Next button.
Click the Next button.
Click the Finish button.
In Netbeand editor you see created project with index.html file. Add to this file link element with path to your css file. At this moment there is not there this file, because it will be created by LESS compiler.
Look at the HTML code:

<!DOCTYPE html>
        <title>TODO supply a title</title>
        <link rel="stylesheet" href="myStyle.css"  type="text/css" > 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <h1>This website uses LESS</h1>
        <p>First line</p>
        <p>Second line</p>

We have in project only HTML file. Now we can configure LESS.
Right click on the name of project and choose Properties.
In Properties window select CSS Preprocessors from Categories.
Click The LESS tab and check Compile LESS Files on Save. In Compiler Options write -x if you would like to compress file. In Watch in Input write accurate for your project path to your less file. If a file will be in main folder write after slash name this file. In Out do the same, but writing path a CSS file, which will be created in this place with this name by LESS. The CSS path have to be the same as in HTML file.
Click the OK button.
The last thing to do is create LESS file. Right click New->LESS File.
In the File Name field write name your LESS file.
Click the Finish button.
In Netbeans you see empty less file. Paste into it this code:

@mainColor: blue;
@pColor: green;

h1 { color: @mainColor ; }
p { color: @pColor ; }

We have HTML file and LESS file. CSS file will be created during Run application. So let’s run application. Right click the name of the project and choose Run.
In Chrome browser you see website.  Notice that according to definition in LESS file the H1 element is blue and paragraphs are green.
After run application the CSS file appears:

Change in LESS file value @mainColor variable from blue to pink, save this file and run application.

@mainColor: pink;
@pColor: green;

h1 { color: @mainColor ; }
p { color: @pColor ; }

Now in browser you see:

The existing CSS file was changed after changed in LESS file.


Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.