I am attempting to use lesscss to build a templating system where each template has 3 or 4 alternative colour schemes.
So for example, I could have a red.less stylesheet that looks like this:
#main_colour: #ff0000;
#import 'main.less';
So, I only have one main.less stylesheet to maintain which contains all the main styles, and uses the variables set for colour codes. I can then create a seperate colour.less file for each colour scheme.
Only problem is when I try to do this I get a Less::VariableNameError which indicates that LESS is parsing the #imports BEFORE it parses the variables.
Is there a workaround to this or any other way to achieve the same end result?
In reference to your tweet, yes, this would work as you expect in Sass. I'm actually kind of surprised that it doesn't work in Less.
I guess the Less guys wanted to keep the .Less file atomic and independent of external environmental settings. This was what I assumed, but I also didn't like it so our .NET port http://www.dotlesscss.com will allow you to do this by default.
Its not a big change to do in the original Less ruby version and if you fancy tinkering with the source I can point you in the right direction.
Out of interest, without been traitorous to the Less team I quite like the SASS syntax now and there are additional things such as conditional statements and loops that you cant (yet) do with Less.
#nex3 - you guys should stop competing and just work together.
Seems like this isn't a problem any more, or at least not for me using "dotless" for .net?
Seems to work fine now with latest LESS.
Related
After browsing css templates in html5up.net, I am really curious as to how design sites/companies produce all their templates. With the amount they churn out, they would surely have to have some sort of efficient system. At first I was thinking that experienced designers might have a combination of coding by hand and copy/pasting large chunks from old templates to new ones. Basing new templates loosely off another in this way would yield some sort of speedy production... Then I thought, with how well organized the front end files are, they can't be coded by hand (or at least not most of it) - it would make sense that they are made from programming that generate the templates, sort of like a template for building templates. I would only go so far as to speculate the possibility, but I would like to know how a person churn out the templates like that. If this isn't the case, is it feasible?
This can be accomplished with preprocessed CSS.
At the simplest level, these languages/frameworks can be viewed as allowing substantial amounts of CSS to be output by making changes to core template files- through the use of variables, mixins, nesting and formulaic derivation / inline functions. Once the templates are set up, something like, say a site colour change, can be accomplished by only changing one or two variables.
You may want to look at SASS (wiki, article)
Sass is a scripting language that is interpreted into Cascading Style
Sheets (CSS). SassScript is the scripting language itself. Sass
consists of two syntaxes. The original syntax, called "the indented
syntax" uses a syntax similar to Haml. It uses indentation to
separate code blocks and newline characters to separate rules. The
newer syntax, "SCSS", uses block formatting like that of CSS. It uses
braces to denote code blocks and semicolons to separate lines within a
block. The indented syntax and SCSS files are traditionally given the
extensions .sass and .scss respectively.
There's also LESS (wiki) which works in a similar way.
LESS (Leaner CSS) is a dynamic stylesheet language designed by Alexis
Sellier. It is influenced by Sass and has influenced the newer "SCSS"
syntax of Sass, which adapted its CSS-like block formatting syntax.
LESS is open-source. Its first version was written in Ruby, however in
the later versions, use of Ruby has been deprecated and replaced by
JavaScript. The indented syntax of LESS is a nested metalanguage, as
valid CSS is valid LESS code with the same semantics. LESS provides
the following mechanisms: variables, nesting, mixins, operators and
functions; the main difference between LESS and other CSS precompilers
being that LESS allows real-time compilation via LESS.js by the
browser. LESS can run on the client-side and server-side, or
can be compiled into plain CSS.
Finally there's stylus (wiki)
Stylus is a dynamic stylesheet language designed influenced by Sass
and LESS. It's regarded as the third most used CSS preprocessor
syntax.
I have an issue with sass compilation.
When I have a project with a partial _partial.scss and have it imported in multiple partial files (because it contains color variables) it will end up in the compiled css multiple times!
This is ugly because the same rule will 'overrule' itself multiple times which makes debugging info (chromium dev tools / firebug) rather unreadable.
I presume there is a solution for all this. I just can't find anything on the issue, anywhere.
The solution is to either not include the same file multiple times or don't have any code that directly outputs CSS in the file you're planning on including more than once. If your variables were in a file by themselves, they could be safely included anywhere you'd like without selector duplication.
Maybe this #mixin helps you: https://github.com/wilsonpage/sass-import-once.
Have a look at the example and note how the reset is only included once in the final CSS.
It seems that just for this, sass (and thus, scss) now have #use instead of #import. From the #use documentation (emphasis is mine):
The simplest #use rule is written #use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
Sass also discourages further use of #import:
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
Any projects having this problem could try running the module migrator tool and check if the problem is resolved.
I want to declare a variable with the path to the library:
#libPath: "any/path/to/lib";
And use it in #import. Something like this:
#import "#{libPath}/file.less";
And I see the result after processing:
#import url("#{libPath}/file.less");
No such possibility or am I doing something wrong?
Thanks.
FWIW this is a bug in less.js that’s been discussed for way over a year now. There are at least two attempts to fix this but one requires large changes to the public API and has consequently been rejected. The other approach only works partially.
On the other hand, lessphp supports this without problem now; I have no idea whether dotless does.
It isn't supported in less.js or dotless so I assume less PHP is the same. It might not be hard to add, why don't you add a feature request.
Also what is the problem you are trying to solve? Maybe it can be solved a better way.
Is there any way in LESS to render the original LESS File + Line Number in the rendered CSS?
Just as Middleman does with SASS... (I'm not sure if it is a SASS or a Middleman feature)
I'm not familiar with Middleman, but the GitHub page for FireLess (inspired by FireSass, I guess) suggests that it would show the Less line number in Firebug, rather than the compiled CSS line number.
I have no idea why the selected answer was chosen to be correct - it relates to a different build of LESS built for the .NET framework, not simply LESS itself.
Anyhow, yes, LESS does support this. It's not particularly well documented, but if you compile using the --line-numbers=[comments|mediaquery|all] flag, it will compile your CSS with the debug info spec SASS established.
If you're using Grunt, and grunt-contrib-less, you can use the dropLineNumbers option (really strange choice of name, imho). I typically set mine to all.
There is now an option in dotless to output this information as per sass does. the flag is "debug". It will be included in the next release - https://github.com/dotless/dotless/issues/186
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.