PhpStorm generate CSS by LESS

        Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less runs inside Node, in the browser and inside Rhino. 

 

        We always use LESS format file to generate CSS file. In PhpStorm, it also can realize it. Now, let's realize it by the following ways.

 

Install LESS

        Because Less runs inside Node, we need to install node.js firstly. We can download the node.js on official website  https://nodejs.org .  After installing node.js, we can use instruction "  npm install -g less " to install LESS.

 

Config PhpStorm

        After we install Less, if you want to use it in PhpStorm, you need to config PhpStorm firstly. 

 

       If you have install node.js. When you open a project on PhpStorm, and create a LESS file. The PhpStorm normally will warnning you as following:

        Click "Add watcher", it will popup the setting panel 【Edit Watcher】.

       Setting as above, and click "ok". The LESS file will generate CSS file automatically.

 

       If there didn't have the warnning. You can also realize it by the following ways: 【Settings】->【Tools】->【File Watchers】. Then on the right sidebar, there is a  button. Click it, and choose 【Less】.  Now, it will also appear a 【Edit Watcher】 panel.

 

转载于:https://www.cnblogs.com/lizsCnBlog/p/4856288.html