I'm using Less files with Bootstrap for my application and also using Less for client-side CSS compiling. I'm wondering how I can minify the compiled CSS output with Less.
I think I need to declare something in between above lines.
Most popular tools for task automation are Grunt and Gulp. Both can assist you in your minification.
But to use your less files you have to convert them to .css.
You can use https://www.npmjs.com/package/grunt-contrib-less to convert your less to css and then minify then using https://www.npmjs.com/package/grunt-contrib-cssmin.
Related
Is it possible to minify LESS files in the same way as CSS files are minified by cssmin?
Are there any tools for this?
P.S. I don't need LESS files to be compiled into CSS. LESS files must remain LESS files because they are compiled at the client side by the less.js library. This is necessary to give users an option to override some of the variables used in LESS files and to create own styles.
I'm working in very big project and using GruntJS.
For compile sass files i'm using Gruntjs plugins SCSS and watch;
But it is very slow, for one run want 6-7 sec.
well the task is not slow, you need see how many files you are compiling.
e.g.: if you are compiling vendor css like boostrap font-awesome with you sass files of course will make that slow.
I suggest to you insert boostrap and fontawesome calls in your html and remove from your sass compiling
try use this task:
time-grunt
I hope that helped you somehow.
I'm curious what's the easiest way to build total.css based on total.less file that contains list of another imported .less files.
P.S. there are many less files with complicated structure so online tool to get the css file is not a choice in our case.
In my opinion, the easiest way to compile LESS into CSS is using the LESS.app for mac. Alternatively, the Offical Documentation for Less has a number of other tools you can use, such as the NPM command line utility.
If you wanted to compile LESS in your browser, you could also set up less.js for compiling LESS to CSS on the client-side. (However, I only recommend this for development)
I'm more familiar with SASS, wherein I can create scss files that start with an underscore so that the scss compiler ignores them. I then import these files into a main.scss file, and they are then compiled into that. Then my HTML onlt links to the main file.
Is there a similar mechanism for LESS? I know how to import files into a LESS file, but will the child LESS files compile to separate CSS files anyway?
I did some experiments, and apparently the underscore at the name beginning works for LESS as it does SASS. (At least using CodeKit on Mac).
Is there a tool available for converting a manually created CSS file into a nested, well optimized LESS file?
Short answer: No. Do it yourself.
Long answer: Your CSS file should compile automatically with LESS. Rename .css to .less, then you can progressively improve your CSS file by adding LESS code. Yes it may be the slow way, but it is a great way to go.
No. Time to roll up your sleeves and re-create whatever css you have into .less files.
If you are building a framework, I highly suggest looking at this, as it contains many variables and mixins that are helpful for .less files.
Keep in mind that while {less} is awesome, you should not use it for deployment. I suggest using your .less files for development only, and compiling them into minified .css files for deployment/production.