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.
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.
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?
I have an existing Django project which uses regular CSS. The style sheets are broken up by functionality, so there is a nav.css, course.css, default.css, reset.css, etc. All of these are imported in a main.css, which is referenced from the html pages.
I would like to use Compass in this project so I can make the style sheets more manageable and also make it easy to skin the UI.
Before checking out Compass, I looked into Sass, and created .scss files for all my style sheets.
Now I realize that it may be better to use Compass than just Sass, because I will get all the default styles that come with it. However, I am a bit confused about how to start the refactoring process.
What would be the right process to refactor (in baby steps) an existing project which already has its styles defined, to get it to use Compass?
Much of the refactoring work is the same with or without Compass and you'll see the benefits that Sass offers sooner than those of Compass.
Compass creator Chris Eppstein did a write-up of how he went about refactoring digg's CSS. To sum up:
Extract partials. You're well on your way with this one, since you already have separate stylesheets for different functionality. Go further and pull out independent sets of rules to make them easier to manage and break down the refactoring project into smaller steps.
Analyze styles. Look for repeating patterns and inheritance relationships in your new partials. Wherever you have selector duplication could be a good place to start the next step.
Extract base classes. This is where you DRY up your CSS with #extend. Pull out duplicated declarations into a base class and extend.
Apply nesting. Nesting is a great Sass feature to make your stylesheets easier to read.
Extract mixin. If you found common styling patterns in step 2, this is the time to extract them into mixins.
Now you can really start taking advantage of Compass and its reusable patterns. Familiarity with the Compass documentation will help to identify which of the mixins are applicable to your project.
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.
Is there any library available around to manipulate CSS files like the Hpricot for HTML/XML etc.
I have a lot of CSS files for different theme, and sometime for a minor change I need to open each CSS file and make that change.
I want to do it programmatically, preferably in Ruby.
Thanks,
Imran
Have you taken a look at less or Sass? They probably aren't quite what you're looking for--but they are both languages that compile to CSS and use cleaner syntax and other benefits like variables.