I want to define a variable, which could be empty in some cases
#prefix: "";
and to use it like this
src: url("#{prefix}/path/to/something");
the problem is that it compiles into
src: url("""/path/to/something");
How to define an empty string variable, that can be compiled in
src: url("/path/to/something");
Update:
Issue closed
https://github.com/cloudhead/less.js/issues/532
Just found a way to do this... escape an empty string #prefix: ~'';
I ran into this with the box-shadow inset option that will often remain empty.
I'm not sure this is possible in less. You could make a mixin function which returns the path with the prefix prepended to it. This would be useful if you want to change the prefix once in awhile and only have to do it in one place.
.prefixRed(#path: #defaultpath) {
background: transparent url("red/#{path}");
}
.prefixBlue(#path: #defaultpath) {
background: transparent url("blue/#{path}");
}
Related
#color-purple: "#ffffff"
#colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey;
.ColorsMixin(#i:0) when(#i =< length(#colors)){ //loop over icons array
#color: extract(#colors, #i); //extract the icon at current index #i
.color--#{color}{
background: #{color-#{color}};
&:before{
content: "#{color}";
}
&:after{
content: "\#{color-#{color}}";
}
}
.ColorsMixin(#i + 1);
}
.ColorsMixin();
So, I can get it to do what I want to do in the
content: "\#{color-#{color}}";
part. This will output
content: "#ffffff";
However, when I try to output the #color-purple variable as the background, LESS throws an error. It only seems to work if I wrap it in quotation marks, but the background property wants the hex code without the quotes around it.
What's the trick here?
background: #{color-#{color}};
is not valid Less syntax, the proper one would be:
background: ~'#{color-#{color}}';
Note however, the very idea of indirectly refering to a variable values via escaping is a durty kludge (quite wide-spread but still very dirty).
It works when you assign such value directly to CSS property, but it will fail for anything else, simply because such value is not a color anymore but an unquoted string with an unknown content...
E.g. the following code will fail:
#color-dark-purple: #321;
div {
#color: 'color-dark-purple';
background: fade(~'#{color}', 50%); // error, not a color value
}
The proper Less method of getting a variable value via its name is "variable reference", e.g.:
#color-dark-purple: #321;
div {
#color: 'color-dark-purple';
background: fade(##color, 50%); // OK, proper color value
}
Additionally, take a time to consider if the whole approach of having all these colors as distinct variables and then having a separate list of these variables names is really what you need. Normally a single list having both color names and values is not such awfully bloating and much more maintainable.
I'm in a bit of a pickle. I just picked up WinLess (the compiler I'm using) about two days ago and I've just vaguely learned the basis of LESS. Anyways, I'm having a problem with this bit of code:
// Font
#verdana: font-family:"verdana";
#sans: font-family:"sans-serif";
When I do compile this I get this message:
ParseError: Unrecognized input in on line 4, column 3:
3 // Font
4 #verdana: font-family:"verdana";
5 #sans: font-famlit:"sans-serif";
Can anyone give me a hand? Thanks!
For LESS 1.7+
They have now added rulesets that work like this:
#verdana: {font-family:"verdana"};
.myClass {
#verdana();
}
Note the syntax: you pass a bracketed {} set of properties, and access it with the parenthesis () after the variable name, much like a mixin. As you can see, it also functions a lot like a mixin (similar to lucian's answer), but it has the added value that it can be passed as an argument, so this is possible:
LESS
#verdana: {font-family:"verdana"};
.myMix(#font) {
#font();
}
.test {
.myMix(#verdana);
}
CSS Output
.test {
font-family: "verdana";
}
You can declare it like this: .myfont{ font-family:"some family, some generic family"} and then use it like this: div{ .myfont; }
i only know it in this way :
#variable_name: 'individual_font_name', Verdana, sans-serif;
a font variable with a name, a font name like "My_Verdana" and the main font and the second as example for a failure of the main-font.
hope this helps, greetings.
The processed code looks like this:
.body {
color: #eeeeee;
}
.someting {
color: #dddddd;
}
I want it to be:
.body {
color: #eeeeee;
}
.someting {
color: #dddddd;
}
Is there such a possibility? Google can't find an answer.
I bet you could write a simple regex find-replace looking for }'s and replacing with }\n, and have Grunt execute that on your css (post-compilation from SASS).
This looks like it'd do the trick:
https://npmjs.org/package/grunt-regex-replace
I think the closest you can get is expanded. The extra line break won't be there when you're nesting but your example code would output exactly like you demonstrated.
To answer this question, you can go to rubygems/gems/sass-3.4.9/lib/sass/tree/visitors/to_css.rb (or anywhere your to_css file is), and edit this:
output("}" + trailer) to output("}\n" + trailer)
And then remove this newline:
trailer = "\n" if node.group_end
It might have been an oversight when parsing the nesting, because the newline set on "trailer" applies to every other line (so you'd have double the lines without removing it if you don't nest anything).
#mixin f1($color1, $color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=0);
}
What i want to do is escape the apostrophe's ability of turning $color1 into a string.
startColorstr='$color1' into startColor1str='#000000'.
#mixin f1($color1, $color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=+"'"+$color1+"'"+, endColorstr=+"'"+$color2+"'"+,GradientType=0);
}
this didnt work
apparently i had to add the variable inside brackets like '{$color}' but still that wouldnt work alone.
i had to also add a '#' (hash) as well like '#{$color}' (even though i was passing the value of "#333" in the mixin, it still required the #
So the result looks something like this:
#mixin f1($color1,$color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0);
}
I have this little mixin set up:
.linear-gradient(#direction:top, #color1:#fff, #color2:#000)
{
background-image: -webkit-linear-gradient(#direction, #color1, #color2);
}
Then, in my main.less I'm trying something like this:
a { .linear-gradient(top, #999, #666); }
That works fine, by say I want to do something like this:
a { .linear-gradient(top, , #666); }
Now, the first color should default to its default mixin color. How do I do this? Is this even possible
You can also explicitly pass the arguments, where the remaining arguments assume their default values.
a { .linear-gradient(#direction:top, #color2:#666); }
Less isn't quite that clever. You can either be explicit:
.linear-gradient(top, #fff, #000);
or use a variable as an abstraction to pass in the defaults.
#colorVar1: #fff;
.linear-gradient(top, #colorVar1, #000);
Less doesn't know how to handle an empty space, and will treat is as invalid.