This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
I know you can add a parent selector like this:
.main-selector {
.parent-selector & {
}
}
I'm trying to figure out if there is a way to go back to the .main-selector so I can add a hover state style to a child element. So, something like this:
.main-selector {
.child-selector {
*styles*
.main-selector:hover & {
*hover styles*
}
}
}
The correct syntax would be:
.main-selector {
.child-selector {
*styles*
}
&:hover {
*hover styles*
}
}
This will produce a hover for your main-selector. You could do it the other way arround, like so:
.main-selector {
&:hover {
*hover styles*
}
.child-selector {
*styles*
}
}
Related
This question already has an answer here:
SCSS target class before :hover
(1 answer)
Closed 2 years ago.
.card {
&__header {}
&__title {}
&__content {}
&__hasFullImage {
&:hover {
&__header {}
//I want something like this
.card__header {}
//and not to type the parent class
}
}
}
So Im facing a situation where I'm using BEM with SASS, and for me the whole point of this is I can grab my SCSS file to other project change the name of the parent class to whatever I want and will work. But in this situation on Hover I can't reach the .card__header without using &__header, so If I change the parent class I will need to change the class on hover aswell.
Because the output will be .card__hasFullImage .card__hasFullImage__header and what I want is .card__hasFullImage .card__header.
Is there any way to do this without typing the parent class?
.card {
$this: &;
&__hasFullImage {
&:hover {
#{$this}__header {}
}
}
SCSS target class before :hover - I had same issue
I'm stuck on this one. I know I have an ability to reach all the way outside of the nested operators to add a prefix class like:
.myEl {
html.no-touch & {
}
}
and that will output:
html.no-touch .myEl {}
but I'm wondering if there is a way to escape by only one level, rather than all of them. Given this sort of input:
.myEl {
.myEl3 {
.myEl2 {} /* direct parent operator goes here? */
}
}
I would expect this sort of output:
.myEl1 .myEl2 .myEl3 {}
Is this possible?
Unfortunately, this is not possible in SASS. You'd probably have to do something like this if you don't want to nest further (which I'm sure you already knew).
.myEl1 {
.myEl3 {
/* Base styles here */
}
.myEl2 .myEl3 {
/* Specific styles here */
}
}
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
Hi all I'm new to SASS (late I know) and playing around with mixins.
Basically is there a way to link a variable to a string here is what I'm trying to do but it throws errors.
(This is a condensed version)
#mixin post-link ($class, $color, $hover) {
a.$class:link {
color: $color;
}
a.$class:hover {
color: $hover;
}
}
Link I say this is a little simpler than what I am trying to do in the mixin (more variables in full one).
EDIT: should add i'm using Compass.
Thanks
Yes, you just have to use variable interpolation. Example:
#mixin post-link ($class, $color, $hover) {
a.#{$class}:link {
color: $color;
}
a.#{$class}:hover {
color: $hover;
}
}
Example on SassMeister: http://sassmeister.com/gist/9533103
The key is adding #{ and } around your variable names to get them expanded.
This question already has answers here:
Dynamic Sass Variables
(3 answers)
Closed 8 years ago.
I'd like to do something like that in SASS:
$GREEN: #57da99;
$HEADER_PURPLE: #8585ff;
$BLUEISH: #4478ff;
$RED: #ff475d;
$RED2: #ff445e;
$currentColor:null;
body.page-about { $currentColor: $BLUEISH; }
body.page-browse { $currentColor: $GREEN; }
body.page-signup { $currentColor: $HEADER_PURPLE; }
body.page-login { $currentColor: $HEADER_PURPLE; }
body.page-contribute { $currentColor: $RED; }
I've no error, it's compiled with success. But when I check my page, the value of $currentColor is $RED even if I'm not in body.page-contribute.
So, I don't know if SASS doesn't handle it or if I made a big mistake.
Thanks.
You are declaring a Sass variable with a global scope, so each line is modifying the global var, like in JavaScript.
You can use #debug $currentColor; between you lines to see variable state.
You should probably use a mixin to prevent scope issue, or declare another variable with a local scope each time (try to just delete $currentColor:null;)
Remove the line $currentColor:null; - there is no need to instantiate variables in SASS outside their required scope.
$GREEN: #57da99;
$HEADER_PURPLE: #8585ff;
$BLUEISH: #4478ff;
$RED: #ff475d;
$RED2: #ff445e;
body.page-about { $currentColor: $BLUEISH; }
body.page-browse { $currentColor: $GREEN; }
body.page-signup { $currentColor: $HEADER_PURPLE; }
body.page-login { $currentColor: $HEADER_PURPLE; }
body.page-contribute { $currentColor: $RED; }
I am trying to use LESS CSS to write my CSS but i got a problem with nested pseudoclasses
I
.class1 {
&:nth-of-type(2n) {
.class2{
}
}
}
the output is:
.class1.class2:nth-of-type(2n) {}
but I want to have this:
.class1:nth-of-type(2n) .class2{}
Any ideas?
Not an issue. You probably had a version of LESS CSS that did not produce the correct code. Try the online less converter and see that it works fine. Here is what I get:
(in)
.class1 {
&:nth-of-type(2n) {
.class2{
x:1;
}
}
}
(out)
.class1:nth-of-type(2n) .class2 {
x: 1;
}