I'm trying to create an hover effect for elements without the class 'is-current' but somehow the following SCSS does not work as expected:
.class {
&:not(.is-current):hover {
color: #fff;
}
&.is-current {
color: #000;
}
}
I cannot figure out why the generated css is this:
class::active, class::focus, class::hover {
background: #fff;
}
I already tried &:not(".is-current") but the result is the same.
Does somebody know how to achieve this?
Thanks in advance!
The following works pretty normal for me,
.some {
&.is-current { color: blue }
&:not(.is-current):hover { color: red }
}
and the output is
.some.is-current {
color: blue;
}
.some:not(.is-current):hover {
color: red;
}
just like you expect, which works fine:
.some.is-current { color: blue }
.some:not(.is-current):hover { color: red }
<span class="some">One</span> · <span class="some is-current">One</span>
Perhaps there's something else to your problem.
Related
I'm currently doing a project in Twine and am using the Sugarcube format. I can't figure out how to style individual passages using CSS. I've tried creating classes in CSS and then tagging a passage with that class's name, but it won't work.
The SugarCube documentation lists a number of ways to style a passage based on passage tags. So, if you tagged a passage with "forest" these examples are given:
→ Using class selectors on <body>
body.forest { background-image: url(forest-bg.jpg); }
body.forest .passage { color: darkgreen; }
body.forest a { color: green; }
body.forest a:hover { color: lime; }
→ Using [data-tag~="…"] attribute selectors on <body>
body[data-tag~="forest"] { background-image: url(forest-bg.jpg); }
body[data-tag~="forest"] .passage { color: darkgreen; }
body[data-tag~="forest"] a { color: green; }
body[data-tag~="forest"] a:hover { color: lime; }
→ Using [data-tag~="…"] attribute selectors on <html>
html[data-tag~="forest"] { background-image: url(forest-bg.jpg); }
html[data-tag~="forest"] .passage { color: darkgreen; }
html[data-tag~="forest"] a { color: green; }
html[data-tag~="forest"] a:hover { color: lime; }
Make sure you put the CSS you use in your story's Stylesheet section.
Is it possible to combine the following code and using the :hover selector and #if statement together?
$active: true;
button {
&:hover {
color: red;
}
#if $active {
color: red;
}
}
This is the thing I'd like to do:
button {
&:hover,
& #if $active {
color: red;
}
}
Thanks in advance.
You can actually kind of achieve this using $var: if();. It could look something like this:
$target: if(true, "&", "");
a {
&:hover,
#{$target} {
color: black;
}
}
More info on if() here: http://thesassway.com/news/sass-3-3-released#if
I'm currently getting this output:
.'teal-dark' { color: #xxx; }
What I want is this: {
.teal-dark { color; #xxx; }
Here is what I'm trying to do:
#teal-dark: #xxx;
.#{currentMember} div { background: ~"#{#{currentMember}}" };
See: http://lesscss.org/features/#variables-feature-variable-interpolation http://lesscss.org/features/#variables-feature-variable-names and
#current-member: teal-dark;
#teal-dark: red;
.#{current-member} {
color: ##current-member;
}
compiles into:
.teal-dark {
color: red;
}
Possible relevant questions:
Defining Variable Variables using LESS CSS
Dynamic class names in LESS
Here's the fix from another post:
#selector: ~'.#{currentMember}';
#{selector} div { background: ~"#{#{currentMember}}" };
Is there a way to declare the following:
body.someclass { #maincolor:#somecolor;}
bidy.anotherclass { #maincolor:#anothercolor;}
also tried:
body.someclass {.maincolor {color:#somecolor;} }
body.anotherclass {.maincolor {color:#anothercolor;} }
I'm working on a website where each of there mainsections uses a different color... would be extremely helpfull :)
This code should work.
#color: #4D926F;
#color2: #000000;
body.someclass {
color: #color;
}
body.anotherclass {
color: #color2;
}
Here is the plunker - http://plunker.co/edit/npLOW06U0aAVZmGAHv7U?p=preview
In style.css, I do
.icon-stack .icon-sign-blank: {
color: red;
}
.icon-stack .icon-trash: {
color: white;
}
but it does not changes color, what is that I am doing incorrect here?
It does change colour, but you have unnecessary colons : after both selectors, simply remove them:
.icon-stack .icon-sign-blank {
color: red;
}
.icon-stack .icon-trash {
color: white;
}
http://plunker.co/edit/6z6bMO1opw6zyxAz4DN4?p=preview
just declare a separate class e.g
.red{
color:red;
}
and include it when calling the icon class i.e
<i class="icon-stack red"></i>