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?
Related
I have two large projects, each project has a relatively simple web front-end with multiple themes: different colors and fonts. These themes are the same across projects
One of these projects uses scss and the other uses less. Neither are my strong suit and i am not allowed to make them use one or the other in both places. What i would like to do however is have a shared folder with a file for each theme which could hold all the variables for that theme.
This would allow me to avoid duplication and make maintenance slightly easier, while promoting consistency between the two projects which must have the same colors and fonts between them. Is there a relatively simple way of doing this?
You should read the SASS and LESS documentation. You'll see that SASS and LESS although similar both have different ways of declaring variables. So Importing a LESS file to a SASS file, and vice-versa, will not have the result you expect.
I would suggest, since it's an easy change, adapting the LESS file to a SASS file or a SASS file to a LESS file and create the base for what you want from there.
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)
I would like to start using Compass and Sass to speed up development. At the moment, I have installed Sass on a mac and instructed it to watch a Scss file for input, and a CSS file for generated output.
From many articles, Sass is used with Compass, I'm wondering why that is the case and just what does Compass add that Sass comes without? If you can give an example, the better.
From Sass and Compass in Action, by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis:
1.3 What is Compass?
Compass helps Sass authors write smarter stylesheets and empowers a community
of designers and developers to create and share powerful frameworks. Put simply,
Compass is a Sass framework, designed to make the work of styling the web
smooth and efficient. Much like Rails as a web application framework for Ruby,
Compass is a collection of helpful tools and battle-tested best practices for Sass.
(emphasis added)
Compass is an extension of Sass (as in Compass requires Sass). It has its own compiler (instead of sass --watch, you use compass watch). It has a large collection of mixins and functions that you'll find incredibly useful (while commonly pointed to for generating vendor prefixed CSS3 properties, it can do things like automatically generate spritemaps and the CSS to go with them).
Compass is also built in such a way that you can bundle your own bootstrap type library for easily deploying in multiple projects without the need to copy/paste the source for it in each one.
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.