[ 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
Related
I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}
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.
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 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;
}
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.