For the following SASS when class-a also has class-b then the color applied is blue.
However when the body element has class-a I would expect the color to be red, but instead this results in an error.
.class-a {
&.class-b {
color: blue;
}
&body {
color: red;
}
}
This is currently not possible.
Currently, & is syntactically the same as an element selector, so it can't appear alongside one. I think this helps clarify where it can be used; for example, foo&bar would never be a valid selector (or would perhaps be equivalent to foo& bar or foo &bar).
There is discussion to change this behavior, but it may be a long ways off before this becomes a part of Sass.
https://github.com/nex3/sass/issues/282
https://github.com/nex3/sass/issues/286
In the mean time, all you can really do is this:
.class-a {
&.class-b {
color: blue;
}
}
body.class-a {
color: red;
}
Related
I am trying to work out how to use NativeScript theme v3 and am stuck on something so simple as setting the background colour according to theme:
Here's what I'm trying (using the recommended colorize mixin):
#import "~#nativescript/theme/scss/variables";
.mything {
#include colorize($background-color: primary);
}
But this always just sets the background dark and has no effect when I switch theme.
If I try the following code it is always red, also following the recommended approach:
.mything {
background-color: red;
.ns-dark & {
background-color: green;
}
}
Am I doing something wrong?
I have just found a solution of sorts that solves the issue, in that I am able to make it work when I switch themes - however this seems to defeat the point of having the colorize mixins etc.
.mything {
background-color: red;
}
:host-context(.ns-dark) .mything {
background-color: green;
}
Or:
.mything {
background-color: red;
:host-context(.ns-dark) & {
background-color: green;
}
}
I am posting this here in case anybody else struggles with this and nobody else answers.
Is it possible to manipulate with #content magic variable in SASS?
I would like to replace some stuff in here before output.
Or maybe can I fill some variable with it?
The conclusion is that, I want to make an mixin #important that create both versions. Important, and no-important.
Input
.test {
#include important {
color: red;
text-align: left;
}
}
Expected output
.test {
color: red;
text-align: left;
}
.test-i {
color: red !important;
text-align: left !important;
}
No, you can't. But I quickly wrote you a mixin to make it work. It doesn't accepts multiple properties (yet).
First Note: I changed the mixin it now does accept multiple properties. Here is the Codepen.
Second Note: I updated the mixin adding multiple properties does no longer compile to different classes for each property, instead you get two versions, one without the !important suffix and one with.
This is the mixin:
#function return($state) {
#return if($state == '', '', '-i');
}
#mixin loop($name, $items...) {
#each $item in $items / 2 {
#each $state in ('', '!important') {
$suffix: return($state);
.#{$name}#{$suffix} {
#for $i from 1 through (length($items) / 2) {
#{nth($items, ($i * 2) - 1)}: #{nth($items, ($i * 2))} #{$state};
}
}
}
}
}
This is how you include it:
// #include loop([classname], [property], [value]);
#include loop(whateverClassname, color, red);
This is what it compiles to:
.whateverClassname {
color: red ;
}
.whateverClassname-i {
color: red !important;
}
This is what it now compiles to, when you use multiple properties at once:
#include loop(whateverClassname, color, red, background-color, green, display, flex);
.whateverClassname {
color: red ;
background-color: green ;
display: flex ;
}
.whateverClassname-i {
color: red !important;
background-color: green !important;
display: flex !important;
}
Conclusion: it works as expected and does no longer bloat your CSS.
Hope I could help you at least a little ;-)
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.
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
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;
}