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.
Related
I have a variety of CSS files and some LESS files. The CSS files have different prefixes and suffixes that the LESS files don't, so I can't know with certainity if a CSS file is derivated from certain LESS file just for the names of the files.
I was wondering if there is a tool, plugin, extension, method, way or similar to check a CSS against a LESS file and determine if the CSS file was compiled from the LESS given file and, if possible, to what degree.
I'm working on a Create-React-App project, which notoriously does not support css transpilers such as SASS and Less. The general solution, as discussed here and here, is to compile the source .less/.scss and import the build product .css into your components. Then you can remove all .css from source control and only track .less/.scss.
This is a fine solution, but only a handful of my components really need Less for clarity/extensibility; for the most part, pure css is fine. So, what I'd like to do is use .css everywhere except for some .less sprinkled in here and there. I can configure this with the Less compiler, but for source control I'd like to watch only the "source" css files, and ignore the "build" css files (generated from Less). Because of this I cannot blanket .gitignore all .css, since some are truly source files.
So, is there a glob pattern for this? Maybe:
*.css where *.less
I see two other possible solutions:
switch everything to .less, even when it's not necessary, and go on ignoring all *.css
selectively .gitignore only the .css that are build products.
I like option 2, but it just seems a little error prone and more maintenance.
Switch everything to less is the verter choice: only one why to make css. It is also easiest to understand how project works for a colleague.
You should also keep different css folders for generated and non generated css file. Then, you can just ignore folder with generated.
You could get 2 folders for exemple src and dist
Simply put source .css and .less files in the src folder and when compiling this folder, copy the .css files to the dist one while .less files are compiled.
But I prefer your "all .less" approach which is less confusing for other developpers.
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.
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.