This works
#notifications .notice {
#apply bg-purple-100;
}
#notifications .alert {
#apply bg-pink-200;
}
But this doesn't work
#notifications {
.notice {
#apply bg-purple-100;
}
.alert {
#apply bg-pink-200;
}
}
Is it not possible to have nested curly braces in CSS?
Related
How can I have this output using Sass?
.class.active .class-name1 {}
.class.active .class-name2 {}
Here is what I tried :
.class {
&.avtive {
&-name1 {
}
&-name2 {
}
}
}
You need to keep a reference to the outer class name, and interpolate it for your -name classes. Using color: red as an example of the style to apply:
.class {
$outer-class: &;
&.active {
#{$outer-class}-name1 {
color: red;
}
#{$outer-class}-name2 {
color: red;
}
}
}
I have less code which looks as follows:
.my-func(#color) {
&:not(:hover) {
color: #color;
}
}
.class1, .class2 {
.subClass1 {
.my-func("#ffffff");
}
}
This results in the following css:
.class1 .subClass1:not(:hover),
.class2 .subClass1:not(:hover) {
color: "#ffffff";
}
What I want to do is to generate css that, in addition to outputting what is being output right now, will also allow me to add more selectors after the part of the css that is output by the function.
So I want css that looks like this (I added the line breaks):
.class1 .subClass1:not(:hover),
.class2 .subClass1:not(:hover),
.class1 .subClass1:not(:hover) p.some-other-class,
.class2 .subClass1:not(:hover) p.some-other-class,
.class1 .subClass1:not(:hover) p.yet-another-class,
.class2 .subClass1:not(:hover) p.yet-another-class {
color: "#ffffff";
}
So can this be done using less features, so that I can somehow pass in a list of two element selectors to the function (p.some-other-class and p.yet-another-class), and the function will run for (to give the first two rows of output) and will then run for the elements in the list passed in to append these after the output of the function? Something like running an .each function on the list passed in, within the function, to accomplish this?
You can try like below:
#class: some-other-class, yet-other-class;
.my-func(#color) {
&:not(:hover) {
color: #color;
}
each(#class, {
&:not(:hover) p.#{value} {
color: #color;
}
})
}
.class1, .class2 {
.subClass1 {
.my-func(#ffffff);
}
}
If you want to pass the list to the function adjust like below:
.my-func(#color,#list) {
&:not(:hover) {
color: #color;
}
each(#list, {
&:not(:hover) p.#{value} {
color: #color;
}
})
}
#class: some-other-class, yet-other-class;
.class1, .class2 {
.subClass1 {
.my-func(#ffffff,#class);
}
}
More generic with any kind of selector like below:
.my-func(#color,#list) {
&:not(:hover) {
color: #color;
}
each(#list, {
&:not(:hover) #{value} {
color: #color;
}
})
}
#class: ~"p.some-other-class", ~"div.yet-other-class";
.class1, .class2 {
.subClass1 {
.my-func(#ffffff,#class);
}
}
I have a project where legacy code has classes like
promo game-promo
I've got the chance to clean up the css by changing to scss but the issue I'm trying to cover is I'd like to nest promo and have game- prepend the parent.
.promo {
display: flex;
game-& {
color: black;
}
}
I'd have liked the above to work but it doesn't and wondering if anyone has come across any ways of achieving what I'm after?
.game-promo {
color: black;
#at-root .promo {
display: flex;
}
}
It seems its not possible so after re-jigging the code I have now got this.
You can't do what you're trying. The "&" is used to get the current selector, in your case : game-.promo or .game-.promo if you add the class selector but it can't work.
In your case, you can do :
.game-promo {
color: black;
.promo {
display: flex;
}
}
Or rename your classes name : (I give an example with inverting the logic of your names)
Parent with ".promo"
Child with ".promo-game"
So you could do :
.promo {
//properties
&-game {
//properties
}
}
It is possible but not very pretty (code on jsFiddle):
/** see https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a */
#function parse-dotless($class) {
$this: quote($class);
#return if(str-slice($this, 0, 1) == ".", str-slice($this, 2, str-length($this)), $this);
}
.promo {
color:yellow;
#at-root .game-#{parse-dotless(&)} {
color: blue;
}
}
<span class="promo">Hello</span>
<span class="game-promo">World</span>
You cannot do exactly what your snippet states using only the & feature. Instead you could build modifier classes like this:
.btn {
&-primary {}
&-secondary {}
}
Which is translated to:
.btn-primary {}
.btn-secondary {}
In your code example, you can invert the rule names:
.promo {
display: flex;
&-game {
color: black;
}
}
Read more about the sass-ampersand
I want to create a sass file that the selectors will be attribute selectors.
When I work with class selectors, in most of the cases I will do
.parent {
&-child {
}
}
which gives me the following css: .parent-child {}.
I want to achieve the same thing with attribute selectors:
[data-parent] {
&-child {
}
}
which I want to become: [data-parent-child] {}
someone knows how to achieve this? thanks.
You can use this mixin as a workaround to get the desired result.
#mixin child-attribute($child) {
$string: inspect(&);
$original: str-slice($string, 3, -4);
#at-root #{ selector-replace(&, &, "[#{$original}#{$child}]" ) } {
#content;
}
}
The code simply does the following
$string variable is responsible for turning the parent selector to a string using the inspect function
$original variable is responsible for getting the text content of the $string variable i.e the value 'data-parent' from '([data-parent])'
selector-replace function then replaces the parent selector with the concatenation of the $original variable and child variable
When used in the following ways
[data-parent] {
#include child-attribute('-child') {
color: green;
}
}
The css output
[data-parent-child] {
color: green;
}
Depending on what you want to achieve, it can also be used like this
[grandparent] {
#include child-attribute('-parent') {
color: white;
#include child-attribute('-child') {
color: blue;
}
}
}
Which generates the following css
[grandparent-parent] {
color: white;
}
[grandparent-parent-child] {
color: blue;
}
Hope this helps you
You can create mixin that will set styles for elements with data attribytes.
Scss:
#mixin data($name) {
[data-#{$name}] {
#content;
}
}
* {
#include data('lol') {
color: red;
};
}
Css output:
* [data-lol] {
color: red;
}
DEMO
I would go down a slightly different route of having a class on your elements that contain the data attributes.
<div class="data-obj" data-parent="true"></div>
<div class="data-obj" data-parent-child="true"></div>
then in your SASS do
.data-obj {
...
&[data-parent] { ... }
&[data-parent-child] { ... }
}
Is it possible to #extend a SCSS placeholder with nesting, and have that nesting reflected in the resulting class?
Given a nested placeholder:
%my-form-field {
...
&__label {
...
}
&__feedback {
...
}
}
I currently have to do the following:
.one-of-many-targets {
#extend %my-form-field;
&__label {
#extend %my-form-field__label;
}
&__feedback {
#extend %my-form-field__feedback;
}
}
But I'd like to be able to simplify this to:
.one-of-many-targets {
#extend %my-form-field;
}
... and have it resolve to:
.one-of-many-targets { ... }
.one-of-many-targets__label { ... }
.one-of-many-targets__feedback { ... }
Is there a different way to write my placeholder and #extends to make the SCSS cleaner, as in the 2nd example?
You can use a mixin instead:
#mixin my-form-field() {
width: 10px;
&__label {
width: 20px;
}
&__feedback {
width: 30px;
}
}
.one-of-many-targets {
#include my-form-field();
}
will generate:
.one-of-many-targets {
width: 10px;
}
.one-of-many-targets__label {
width: 20px;
}
.one-of-many-targets__feedback {
width: 30px;
}
You could try use selector.append()
See: https://github.com/sass/sass/issues/2808#issuecomment-574413393
Also see more info why parent selector didn't work as you expect in extend-only selectors: https://github.com/sass/sass/issues/2262#issuecomment-291645428