How to Do Less @Import Without @Import Literally

How to do LESS @import without @import literally?

The simplest way:

@import (less) 'reset.css';
@import (less) 'rebuild.css';

/* SITE STYLES HERE */

LESS.js - Can only import one .less file

I think this was due to a bug in LESS.js, and has since been fixed. Additionally, I've now moved to SimpLESS on Windows, and CodeKit on OSX. Neither of these have the same issues.

Using LESS for custom styling

Wrote an MSBuild target to compile all the LESS files for each of the different customers using the dotless compiler. The target uses the FileUpdate task from MSBuildTasks to amend the variables Import statement in each LESS file prior to the compilation task e.g @import '/css/default/variables.less' is changed to '/css/customer1/variables.less' etc.

What should my LESS @import path be?

After tracking down exactly where the error was coming from in the django-compressor source. It turns out to be directly passed from the shell. Which clued me into removing all the variables and literally just trying to get the lessc compiler to parse the file.

Turns out it wants a relative path from the source file to the file to be imported in terms of the physical filesystem path. So I had to back all the way out to my <project_root> and then reference assets/css/lib.less from there. The actual import that finally worked was:

@import "../../../../assets/css/lib.less"

What's very odd though is that lessc would not accept an absolute filesystem path (i.e. /path/to/project/assets/css/lib.less). I'm not sure why.

UPDATE (02/08/2012)

Had a complete "DUH" moment when I finally pushed my code to my staging environment and ran collectstatic. The @import path I was using worked fine in development because that was the physical path to the file then, but once collectstatic has done it's thing, everything is moved around and relative to <project_root>/static/.

I toyed with the idea of using symbolic links to try to match up the pre and post-collectstatic @import paths, but I decided that that was far too complicated and fragile in the long run.

SO... I broke down and moved all the LESS files together under <project_root>/assets/css/, and rationalized moving the LESS files out of the apps because since they're tied to a project-level file in order to function, they're inherently project-level themselves.

Would it be a bad practice to use less.js in a production site (client-side javascript compliler for LESS style-sheets)?

Just compile the .less into .css before putting it into a production environment. That way it will still display to those without JS enabled, and won't suffer the issues @Plynx mentioned.

As for compiling, there are some real-time compilers out there, specifically:

• For Mac - less.app
• For Windows - Less Parser

Both compile .less to .css on file save, which is awesome, and makes LESS easier to use!

How can I use Bootstrap styles in a LESS file?

1) You should prefer to download Bootstrap's LESS files and import them with @import "bootstrap.less". If you can't follow @seven-phases-max 's links and use @import (less) bootstrap.min.css

2) "// ...can't find the source of the "@screen" at-rules:" these rules are not defined in Bootstrap's LESS files. The code from the docs illustrate the boundaries of the grid defined by Bootstrap. It will show you what happens if you change the variables mentioned.

For example take a look to grid.less which defines:

@media (min-width: @screen-sm) {
width: @container-sm;
}

Also read: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ and LESS variables in @media queries i don't think you solution won't work cause:

@screen-lg: 992px;
@large: ~"screen and (min-width: @screen-lg)";
@media @large{ color: red; }

compiles to:

@media screen and (min-width: @screen-lg) {
  color: red;
}

NB @screen-lg not set.

3) " .hide // compile error" there is no mixins called hide
You could use mixins from responsive-utilities.less (see also: http://getbootstrap.com/css/#responsive-utilities)

In your case you will get something like:

//example DO NOT compile to useful CSS
@import (reference) "bootstrap.less";
#linkedin-flair
{
&:extend(.hidden-xs);
&:extend(.hidden-sm);
}

4) " .col-sm-4 // compile error" .col-sm-4 is dynamical generate (grid.less) you can't use it as a mixin.

use:

#stackoverflow-flair {
 .make-sm-column(4);
}

---

Related Topics