There is piece of code:
.number__icon-container {
display: flex;
align-items: center;
border-bottom: 1px solid;
padding-left: 8rem;
border-color: black.
&_error {
border-color: red;
}
}
If there is some div with number__icon-container_error class it will have red border color but it's not good for me. I need setup red border color for div if it has number__icon-container_error and number__icon-container_focus classes at the same time. How can I do it? Thanks!
You want to get the selector : .number__icon-container_error.number__icon-container_focus starting with this class .number__icon-container.
What you need is the interpolation bracket #{} because two touching ampersands are invalid in Sass.
Here is an article on css-tricks.com.
You can write:
.number__icon-container {
border-color: black;
&_error#{&}_focus { // See the use of the interpolation bracket ?
border-color: red;
}
}
It will compile:
.number__icon-container {
border-color: black;
}
.number__icon-container_error.number__icon-container_focus {
border-color: red;
}
Related
1. Summary
I have list of selectors, to which properties should always apply.
For some selectors must be additionally added another properties.
I can't find, how I can do it without duplicates.
2. MCVE
2.1. Expected CSS
.KiraFirst,
.KiraSecond,
.KiraThird {
color: red;
}
.KiraSecond {
background-color: yellow;
}
In example, I use class .KiraSecond 2 times. Can I get expected behavior without this duplicate?
2.2. Stylus
Live demo on stylus-lang.com
.KiraFirst
.KiraSecond
.KiraThird
color red
.KiraSecond
background-color yellow
This is compiled to expected CSS, but I still use .KiraSecond 2 times.
I don't understand, how I can not use duplicate. For example, syntax as this not compile to expected CSS:
.KiraFirst
.KiraSecond
background-color yellow
.KiraThird
color red
Result:
.KiraFirst,
.KiraSecond {
background-color: #ff0;
}
.KiraThird {
color: #f00;
}
3. Not helped
Stylus official documentation include Selectors section
Stack Overflow Stylus questions
Stylus GitHub issues
Maybe you can use basic class for all elements? For example - .Kira and if you need to specify something for other elements you can add extra class .KiraSecond or use .Kira:nth-child(2)
in your example it can be something like this
.Kira {
color: red;
}
.KiraSecond {
background-color: yellow;
}
or
.Kira {
color: red;
}
.Kira:nth-child(2) {
background-color: yellow;
}
You (can't)? and you shouldn't.
Duplicating that selector in that case is not a bad practice.
you are not duplicating the same property/value for many classes
you can clearly override specific property
you can clearly modify/change behaviour for specific class
e.g:
.class1, .class2, .class3 {
color: red;
background: yellow;
border: 1px solid;
}
.class1:hover {
color: blue;
}
.class2 {
border: 2px dotted;
}
.class3 {
color: pink;
}
What would be a bad practice in that case (with no selector duplication)
.class1 {
color: blue;
background: yellow;
border: 1px solid;
}
.class2 {
color: red;
background: yellow;
border: 2px dotted;
}
.class3 {
color: pink;
background: yellow;
border: 1px solid;
}
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
I'm new to LESS and I'm just experimenting with it, using version 1.5. I discovered the useful extend command, but I was wondering if that could be applied to parametric mixins as well as static ones. Apparently, this doesn't seem possible, based on my experiments:
This works
.some-mixin {
}
.child {
&:extend(.some-mixin);
}
This doesn't work and throws an "unexpected token" error:
.some-mixin(#color, #bgcolor) {
color: #color;
background-color: #bgcolor;
}
.child1 {
&:extend(.some-mixin(red, blue));
border: 1px solid blue;
}
.child2 {
&:extend(.some-mixin(red, blue));
border: 1px solid green;
}
.child3 {
&:extend(.some-mixin(red, blue));
border: 1px solid red;
}
Is this a current limitation of LESS, or am I using it incorrectly? Thanks in advance for the answers.
Edit - Added expected output, as per request
What I would expect makes more sense when there are more children extending the parametric mixin:
.child1,
.child2,
.child3 {
color: red;
background-color: blue;
}
.child1 {
border: 1px solid blue;
}
.child2 {
border: 1px solid green;
}
.child3 {
border: 1px solid red;
}
I'm not sure what you are trying to achieve (that is, I am not sure what you expect the :extend() code to actually do if it were extending the parameteric mixin). If your desire is to define the colors of .child, then using it as a straight mixin works:
LESS
.some-mixin(#color, #bgcolor) {
color: #color;
background-color: #bgcolor;
}
.child {
.some-mixin(red, blue);
}
CSS Output
.child {
color: #ff0000;
background-color: #0000ff;
}
This also makes .child itself a mixin for the red and blue color combination, which I think would have been a net result of the extension working if it had worked. That is, I would expect your second set of code to have produced something like this (theoretically; this does not actually work nor is it actually produced in LESS):
.some-mixin(#color, #bgcolor),
.child(#color: red, #bgcolor: blue) {
color: #color;
background-color: #bgcolor;
}
But these two are nearly equivalent as mixins (one has the added parameters):
/* theoretical mixin if extension worked */
.child(#color: red, #bgcolor: blue) {
color: #color;
background-color: #bgcolor;
}
/* code from straight use of .some-mixin in .child */
.child {
color: #ff0000;
background-color: #0000ff;
}
So that either of the above used like so will get the result of mixing in the child values to the new selector:
LESS
.test {
.child; /* or using .child(); */
}
CSS Output
.test {
color: #ff0000;
background-color: #0000ff;
}
No, currently this is not supported. But it's planned to be implemented in future versions.
Hello I am wondering is it possible to do something like this in less. I have this css:
.parent{display: block; color: red; border: yellow 1px solid;}
.parent a, .parent a.special-link{color: blue; border-color: green;}
I would write it in less like this:
.parent{
display: block;
color: red;
border: yellow 1px solid;
a, a.special-link{
color: blue; border-color: green;
}
}
And rules are ok but what if in further developing I have to add something to :hover but only for it eg. padding: 20px; What is the best way to do this? My first thought is that if there is some kind of workaround/hack/selector that allows to inherit all properties of parent.
I doubt I clearly understand your exact needs (":hover" of what? "only" for what "it"?)
But in general it usually goes like this:
.parent {
display: block;
color: red;
border: yellow 1px solid;
a {
// <a> properties:
// ...
&, &.special-link {
// <a> and <a.special-link> properties:
// ...
color: blue;
border-color: green;
}
&.special-link {
// <a.special-link> properties:
// ...
}
&:hover {
// <a:hover> properties:
// ...
}
/// etc. etc. etc.
}
}
I need to create classes for ~20 colors, but for each one i need to create two - one for background-color and second one for border. I know I can do it like this for every single color:
#green: #00A300;
.green-background {
background-color: #green;
}
.green-border {
border: 1px solid #green;
}
But I think there should be more effective way. Something like that I specify variables and then it loop all colors and generate CSS into pattern:
.[color]-background {
background-color: [#color];
}
.[color]-border {
border: 1px solid [#color];
}
Is this even possible?
This isn't too hard to do with a mixin using Selector interpolation:
LESS:
.color(#name, #value) {
//selector interpolation works when the entire
//variable is used as the selector
#bg-name: ~"#{name}-background";
#border-name: ~"#{name}-border";
.#{bg-name} {
background-color: #value;
}
.#{border-name} {
border: 1px solid #value;
}
}
//be sure to quote the first parameter in case your color name gets
//interpreted as a value, blue would pass #00F which you don't want
.color('blue', #0000FF);
CSS:
.blue-background {
background-color: #0000ff;
}
.blue-border {
border: 1px solid #0000ff;
}