I'm trying to extend icon pseudoclasses generated by Fontello in less.
Now while this works:
.icon-extended:before:extend(.icon-caret-n:before) {}
This doesn't:
ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}
Can't see why?
The li:before in this case will get the content definition from .icon-ok:before, but not the general styles from [class^="icon-"]:before, [class*=" icon-"]:before.
Seems like a bug to me?
Your first case...
.icon-extended:before:extend(.icon-caret-n:before) {}
...you are extending something that has a class itself named .icon-extended so that class also matches the selectors [class^="icon-"], [class*=" icon-"], thus why it works (it has nothing to do with the :extend in this case).
Your second case...
ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}
...you are extending something that does not have the a icon- value noted in its selector ul.checked li, and so would not and should not match either [class^="icon-"], [class*=" icon-"]. Now your extension does not change the class name, but rather just adds the selector to the code block defining .icon-ok:before (and only that code block). The LESS extension is looking purely at the selector string .icon-ok:before and is not "intelligent" in knowing that such a selector would match the other selector strings [class^="icon-"], [class*=" icon-"] (this is essentially what seven-phases-max's comment was about). So you have to do it explicitly, probably best like so:
ul.checked li:before:extend(
.icon-ok:before,
[class^="icon-"]:before,
[class*=" icon-"]:before) {
color: #4fa33b;
}
Related
Given i want to simplify the following LESS code:
#title1: ~"h1.someclass > a";
#title2: ~"h1.otherclass > a";
#{title1},#{title2} {
&:after {
display: none;
}
}
which evaluates to:
h1.someclass > a:after,
h1.otherclass > a:after {
display: none;
}
I tried to merge the classes by using
#titles: ~"#{title1},#{title2}"; // Combine selectors for easier code
#{titles} {
&:after {
display: none;
}
}
This however will yield different CSS.
h1.someclass > a,h1.otherclass > a:after {
display: none;
}
Is this due to the Lazy Evaluation of the variables? If so, why does it yield the CSS this way? And is there a diffrent way of combining selector variables and later using &:after?
(almost copy-pasting from the more wide https://stackoverflow.com/a/23954580/271274)
There're two problems with your attempt:
By definition a content of escaped strings is not a subject for any kind of evaluation at all, so commas (as well as any other special ops) have no meaning there.
Variable interpolation in selectors assumes a single interpolated variable contains only a single selector element. So, strictly speaking, even ~"h1.someclass > a" is already nothing but a hack expected to have side-effects and unspecified/undefined behaviour for anything but extremely trivial cases.
So in your code above the value of #titles works just as a simple/single selector element (the same as body for example).
I.e. in summary and in general, "string-based selector manipulation" (like ~"#{title1}, #{title2}") should be avoided where possible simply because in Less selectors are not strings and strings are not selectors (nor they automatically converted to each other except in, yet again, certain extremely trivial cases).
So far the only non-hackish method to define a reusable list of selectors in Less is a mixin (mixins can be considered as "variables" too even if they have another syntax) that puts an arbitrary set of rules into a ruleset having the said list as its selector. E.g. for your example above it would be something like:
#title1: ~"h1.someclass > a";
#title2: ~"h1.otherclass > a";
.titles(#rules) {
#{title1}, #{title2} {#rules();}
}
// usage:
.titles({
&:after {
display: none;
}
});
Demo.
i read this article http://www.sitepoint.com/dealing-color-schemes-sass/ and I wanted to try to apply the method but I've a question: It's possible use this with a variable?
Ex. I use bootstrap and i wanna change only value (without assign a property) for $brand-primary, can i change this value with this method?
I've assigned a dynamic class on my body ( or ), and i wanna change a $brand-primary value for every class...
Another Ex.
If body class is "en" $brand-primary: red; if body class is "it" $brand-primary: blue; if body class is "fr" $brand-primary: green;
It's possible?
Thanks for your reply.
Perhaps the cleanest way to accomplish this is to create a mixin, and then pass in theme color variables.
The theme mixin code takes in all necessary colors, as well as a name that corresponds to the body class:
#mixin theme($name, $brand-primary) {
body.#{$name} {
background-color: $brand-primary;
}
}
Create a separate Sass partial for housing your theme color variables. In this case, it would look something like this:
$brand-primary: green;
Create as many of these files as you have themes.
Using the themes is then as simple as:
#import 'Themes/_theme-name.scss';
#include theme("theme-name", $brand-primary);
Bonus - if you need to apply styles to a specific theme, it's as easy as an #if statement in the mixin:
#if ($name == "theme-name") {
.class-name {background-image: url(example.png);}
}
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
I'm not able to set the background color for the textfield in GXT. I have used
textfield.setStyleName("backgroung-color:red;")
textfield.setStylePrimaryName("backgroung-color:red;")
But it is not working in IE. How can i do this ?
The function "setStyleName()" is not working as you expect, it sets the component class name. You can create a style class with name for example 'field-bgColor' in your css file like:
.field-bgColor {
background-color: red;
}
after that, you would use it like following:
textfield.setStyleName("field-bgColor");
Or you can use "setStyleAttribute()" function like:
textfield.setStyleAttribute("backgroundColor", "red");
Hope it works for you :)
[ ANSWERED: the carto.css compiler does not support this feature of less.css]
I'm making a stylesheet for TileMill that will be processed with Carto (an extension of less.css). In other words, I'm making a stylesheet with LESS that uses some custom syntax.
I have a lists of selectors assigned to variables as strings, like so:
#water: "[natural='water'], [waterway='river'], [waterway='stream'], [waterway='waterfall'], [waterway='canal'], [landuse='reservoir'], [landuse='basin'], [amenity='pool'], [amenity='swimming_pool'], [amenity='fountain']";
#dirt: "[natural='beach'], [natural='sand'], [natural='scree'], [landuse='bedrock outcrop'], [landuse='quarry'], [natural='land'], [amenity='track']";
I want to be able to use these as selectors in my style sheet, more or less like this (which doesn't work):
(~'#{water}') {
polygon-fill: #bbb;
}
What I want to end up in my stylesheet is this:
[natural='water'], [waterway='river'], [waterway='stream'], [waterway='waterfall'], [waterway='canal'], [landuse='reservoir'], [landuse='basin'], [amenity='pool'], [amenity='swimming_pool'], [amenity='fountain']{
polygon-fill: #bbb;
}
And I'm hoping there's a way to join selector groups, like this:
#water, #dirt {
polygon-fill: #bbb;
}
Thanks for any advice.
the carto.css compiler does not support this feature of less.css