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.
Related
I am creating a website using Drupal 8 and I found a free theme online which I have installed on my site. The theme consists of multiple folders of CSS files. I would like to use SASS to extend and modify this theme. If I want to do this, is it as simple as renaming all the files to SCSS files and compile using Gulp or Compass? Or is there a better practice to follow? Any guidance would be appreciated. Thanks!
There's no need to make any kind of conversion.
You can just change the file extension if you need to.
The SCSS syntax uses the file extension .scss. With a few small
exceptions, it’s a superset of CSS, which means essentially all valid
CSS is valid SCSS as well. Because of its similarity to CSS, it’s the
easiest syntax to get used to and the most popular.
From https://sass-lang.com/documentation/syntax
As it is known that its hard to edit the minified files and thus we prefer to edit minified files. Is there a way that the changes we make in unminified files are reflected in unminified files? Or is there a better technique to deal with this problem in bootstrap?
If you are looking to edit the core bootstrap files which is what it sounds like, that's not a very good idea as it could have unforeseen impacts on the rest of your site.
It is far better to simply overwrite the bootstrap style that you want to change in your own css.
If you are talking about your own minified files, I would recommend getting a plugin for you text editor. I use brackets editor with this plug in https://github.com/abagshaw/brackets-minifier and whenever you save a CSS file you can do ctrl+alt+M to minify and overwrite your minified file. But all decent editors will have similar plugins available.
Hope this helps :)
If you really want to improve your workflow, you should check out some task automation command line tools. We use Gulp at my office. It automates makes those small, tedious, time-consuming tasks like minifying assets so that you can spend more time developing.
I am a pure designer, so I totally new to the field of front-end development.
I have learned what is LESS, what is SASS.
But when I open a HTML template, there are some LESS or SCSS files, but also a lot of CSS files. I am quite confused what's the relationship between LESS/SCSS and CSS?
If LESS/SCSS is so good to use why people still write 10 thousand lines in CSS file, which is impossible for me to read through..?
Are those CSS files like "bootstrap.css" or "animate.min.css" just libraries for LESS/SCSS to use? Or what other relationship between them?
A lot of frameworks ship with not only the LESS and SASS files, but also the results of those files (the exported CSS files). In the case of Bootstrap, this is particularly true: none of the ".css" files are libraries for the LESS. They are the result.
The authors of these frameworks assume that some people want the LESS/SASS workflow, and others want to include the CSS and be done with it. So they include it all. In many cases, the ill-documented sprawling CSS files are actually demonstrating that the assumption about LESS ("so good to use") is not always true. Writing CSS without a preprocessor and with best practices will more often result in a smaller more readable (and well-documented) file than a LESS/SASS-based workflow.
Having spent some time with LESS, I think I might be ready to move back to straight-up CSS.
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)
Or what is the best practice to "import" a less file in sass files?
I'm building a rails project with SASS as the solution for writing syntactic css. The SASS parts worked fine, until I find out that the styles of some open source projects are written in LESS and I really want to reuse their artwork.
Should I just let Rails precompile all LESS and SASS files, and require the result css files in a specified order?
The license of these third party projects are different. Understanding all the details about intellectual property laws seems to be too much work for the small project I'm doing (e.g. should I keep a css file MIT licensed if I changed 90% of it and just used the color palette?), this project will be open sourced as well, so I would like to keep the codes untouched for now.
Update: A easy way of translating all LESS files to SASS files would be nice as well.
From my understanding, LESS & SASS are compiled differently (although are similar)
Would you be able to translate the LESS files you wish to include?