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.
Related
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 have been handed over a website that uses LESS to pre-process CSS. I need to update some styles, but I'm not sure if the previous developers had been modifying LESS files and then compiling the CSS, or if they lazily had just been editing the CSS directly.
I want to edit the LESS but I'm worried that I'll lose any changes the previous devs made to the CSS directly.
I don't know who the previous developers were or have access to their source control to see the file history.
Is there any way to check if the LESS file is in sync with the CSS file?
There is no way to reproduce LESS file from CSS file.
Try to keep a copy of the CSS file and try to compile again. Then compare the two CSS files.
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 wondering what exactly the .scssc file in the .sass-cache folder does and whether it can be used to generate CSS or SCSS if the original scss file has been wiped.
When I open the file in .sass-cache I get thousands of hexidecimals (I think). Is this in any way able to be parsed into CSS or SCSS. And if not, what does this cache file do?
It is default behaviour as caches are compiled from pieces of your code (partials etc). It speeds up compilation process of large number of files.
I don't think you can reproduce your original css / scss from cache.
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).