This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 7 years ago.
How can I turn this:
.btn-primary {
.open .dropdown-toggle.btn-primary { ... }
}
into
.btn-primary {
.open .dropdown-toggle& { ... }
}
I keep getting invalid selector after .dropdown-toggle
If you read the complete error, it should say this:
"&" may only be used at the beginning of a compound selector.
However, .dropdown-toggle.btn-primary is the same as .btn-primary.dropdown-toggle. So place the parent selector at the beginning:
.btn-primary {
.open &.dropdown-toggle { color: blue; }
}
As of Sass 3.4, you can do that like this:
.btn-primary {
.open .dropdown-toggle#{&} { color: blue; }
}
No offense, but I'm not sure you understand what is & used for.. Just in case I'm right here is the explanation:
Sometimes it’s useful to use a nested rule’s parent selector in other ways than the default.
For instance, you might want to have special styles for when that selector is hovered over or
for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.
Example:
p{
background: red;
&:hover{
background: blue;
}
&:active {
background: blue;
}
}
Which will be converted to this:
p {
background:red;
}
p:hover {
background:red;
}
p:active {
background:red;
}
Related
I have the following HTML <div class="parent green"></div>
The green class may or may not be added. It is dynamic. It may also be another name.
In SASS how do I give properties to a .child element of parent when class green is chained to it?
I tried:
.parent {
.child {
.green & {
color: green;
}
}
}
It doesn't work.
I also tried the following which works but I am looking for something similar to the sass above. The code will become repeatable below because I have to add child each time for every dynamic class.
.parent {
&.green {
.child {
color: green;
}
}
}
I'm trying to get a structure like this if possible with sass:
.parent {
.child {
.green & { /* when .parent.green */
color: green;
}
.blue & { /* when .parent.blue */
color: blue;
}
.text-align-right & { /* when .parent.text-align-right */
text-align: right;
}
etc...
}
}
& is treated as parent selector reference in Sass, because of this your code doesn't work since it refers wrong selector.
Use of & directly will not help here, but your goal can be achieved by using mixins, for example:
#mixin child($class) {
&.#{$class} {
.child {
#content;
}
}
}
.parent {
#include child(green) {
color: green;
}
#include child(blue) {
color: blue;
}
#include child(text-align-right) {
text-align: right;
}
}
This piece of code produces result that you want to get, you can check in by yourself on sassmeister.
I'm trying to remove some duplication in my scss selector.
.container {
.operation {
color: green;
}
.row.is-active &,
.row:hover & {
.operation {
color: inherit;
}
}
}
I tried rewriting it like this:
.container {
.operation {
color: green;
}
.row & {
&.is-active, &:hover {
.operation {
color: inherit;
}
}
}
}
However, this causes .is-active to be applied to .container instead of .row
How can I target the syntactical parent when using the ampersand ?
I took some time to answer the question again, as I mis-understood it initially. Unfortunately there is absolutely no way possible to do this in SASS at the moment. Even when trying to make use of the more advanced SASS functions to manipulate selectors and strings it is not possible.
There is some Good News
It is possible to do using Stylus.
I have created a live Example on codepen.
// Stylus - not SASS
.container {
.operation {
color: green;
}
.row {
^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
.operation {
color: inherit;
}
}
}
}
I hope this helps you in some way, at the very least it might provide you with an option, but unfortunately SASS cannot achieve what you are attempting.
This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 7 years ago.
I'm trying to do the following with SASS (scss).
.class {
// Base class styles
a.& {
// Additions for when applied to a link
}
}
But I get a compiler error:
Invalid CSS after "a.": expected class name, was "&"
Any ideas how to achieve this?
Currently I just break out of nesting, but it's sub optimal for my case.
Thanks!
As of SASS 3.4, you can use the #at-root directive in order to scope the selector to the root.
In addition, you will also need to interpolate the parent selector, &, like: a#{&}:
.class {
// Base class styles
#at-root a#{&} {
color: #000;
}
}
Which would compile to:
a.class {
color: #000;
}
It's worth mentioning that you can nest multiple elements under #at-root:
.class {
// Base class styles
#at-root {
a#{&} {
color: #f00;
}
p#{&} {
float: left;
}
}
}
Which would compile to:
a.class {
color: #f00;
}
p.class {
float: left;
}
Using the method found here, it works, but not for two parent classes.
For instance:
.one, .two {
#at-root a#{&} {
color: blue;
}
}
Produces:
a.one, .two {
color: blue;
}
Rather than the intended:
a.one, a.two {
color: blue;
}
Is there any way to get the intended result using a similar method?
You want to use the selector-append() function instead:
.one, .two {
#at-root #{selector-append(a, &)} {
color: blue;
}
}
Using interpolation on the parent selector causes Sass to evaluate it as a string (because that's what interpolation does). This only makes it acceptable to use when you have a single selector. The selector-append (and all other selector-* functions) will evaluate the selector as a list of selectors, appending your desired item to each selector in the list.
This is now possible in pure CSS with the :is() matching pseudo-class:
.one, .two {
&:is(a) {
color: blue;
}
}
Or you simply switch to stylus:
.one,
.two {
a& {
color: blue;
}
}
Codepen Example
I want to nest selectors by prepending the parent selector in SCSS.
The basic selector is:
.selector-class .selector-class__element {}
Here is the HTML:
<div class="selector-class">
<div class="selector-class__element"></div>
</div>
(A) Here is the desired result in SCSS:
.selector-class {
.selector-class__element {
}
}
(B) This is the idea behind how I want to do it: (Does not work)
.selector-class {
&__element {
}
}
Is there a more effecient way of doing it than using the method in (A) ?
You just need to add an extra ampersand at the beginning:
.selector-class {
& &__element {
background: red;
}
}
You need to try this one. This is just an example for both class and element. You may try any one of them.
.selector-class {
&.class, &div { background: blue; }
}
EDIT
Below is the interpolation method of concatenating string.
.selector-class {
&#{'__element'} { background: blue; }
}
CSS
.selector-class .selector-class__element { background: blue; }
more about interpolation
interpolation