Looking to be able to add the app scope id to my sass files when we have multiple apps reusing class names.
That way I can have the following definition:
$app-scope-id: 'appOne';
And then write my SCSS in that app
.blockName{
background: blue;
&__element{
color: orange;
}
}
And call a mixin or something else to just go
#include prefixMixin(){
.blockName{
background: blue;
&__element{
color: orange;
}
}
}
And that render out css like:
.appOne-blockName{ background: blue; }
.appOne-blockName__element{ color: orange }
I'm aware I can use interpolation at the beginning of my block, but was hoping I could keep it cleaner with just a mixin call where necessary and only call it once for an entire SASS file if I wanted.
I don't think it's possible to do what you want with SASS. You could maybe do something like this:
$app-scope-id: 'appOne';
#mixin prefix($selectorType: ".") {
#at-root {
#{$selectorType}#{$app-scope-id}-#{&} {
#content;
}
}
}
blockName {
#include prefix() {
background: blue;
&__element{
color: orange;
}
}
}
Which compiles as:
.appOne-blockName { background: blue; }
.appOne-blockName__element { color: orange; }
But you would still need to include it for each selector that needs the prefix. I'm not sure this can be called "clean" either.
Let's propose that we have the following scss code:
.a {
.b {
.c {
// rules here
}
}
}
This will output the following css: .a .b .c
Now, if I would like to modify the ruleset of .c if .a gets another class, I would have to modify my scss like this:
.a {
.b {
.c {
// rules here
}
}
&.d {
.b {
.c {
// rules here
}
}
}
}
If there are multiple modifications, my scss will become very long, and the rules refering to .c will be out and apart. Isn't there an easier syntax, to keep all the rules of .c together in the code, so that when I need to modify something, it will be easier? I am thinking about something along these lines:
.a {
.b {
.c {
// rules here
^^&.d {
// go up 2 selectors (hence twicte the ^), and add to the selector the `.d` class, then keep on modifying the current selector `.c` here
}
}
}
}
EDIT: I am used to specify each element (or most, any case), in the selector path, so my selectors are as explicit as possible. The above example can be reflected for a dashboard button, which is deep inside the dashboard, and with the basic approach, I will have to replicate 5 levels of nesting, to specify some style for a button, based on the status of the dashboard (ie. sidebar-open). I could of course add a class directly to the button and style it like that, but imo that's an overkill, as there are a lot of different things that change in the stylesheet for this specific status.
For a complete example, when I click this specific button, the sidebar should pop out, some other elements that are getting overlapped, should be pushed to the right, etc. My javascript, simply adds the status representing class to the whole dashboard, and I would like to style everything accordingly. But this way, the styles for the different elements are far and apart unfortunately.
You can use the
sass variable to structure your nested classes and styles.
#each rule to iterate over every key/value pair to emit styles.
Let's suppose you can have 3 classes on first level i.e x, y, z, with their child classes a, b.
Then your scss variable code will look like below:
$classes: (
x: (
a: (
color: blue,
font-size: 15px
),
b: (
color: blue,
font-weight: 600
)
),
y: (
a: (
color: red,
),
b: (
color: blue,
font-size:20px
)
),
z: (
a: (
color: black,
overflow: scroll
),
b: (
color: black,
font-size: 20px,
background-color: white
)
)
);
Now we can iterate above variable like below:
#each $key, $value in $classes {
.#{$key} {
#each $key1, $value1 in $value {
.#{$key1} {
#each $key2, $value2 in $value1 {
#{$key2}: $value2
}
}
}
}
}
If in case you want to add more classes in the future, then you need follow the same structure and add class names and styles accordingly.
Result (CSS)
.x .a {
color: blue;
font-size: 15px;
}
.x .b {
color: blue;
font-weight: 600;
}
.y .a {
color: red;
}
.y .b {
color: blue;
font-size: 20px;
}
.z .a {
color: black;
overflow: scroll;
}
.z .b {
color: black;
font-size: 20px;
background-color: white;
}
I hope it solves your problem & beautifies your code as well.
with Sass,
%red-text { color: red; }
.text-1 { #extend %red-text; }
.text-2 { #extend %red-text; }
.text-3 { #extend %red-text; }
will render
.text-1, .text-2, text-3 { color: red; }
Is it possible to compile like so?
.text-1,
.text-2,
.text-3 { color: red; }
Thanks!
Check this following link, you can set your output style in Sass.
SASS Refence - Output styles
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;
}
Im using SASS. I need to have class-1 and class-2 at different places in my stylesheet, like so:
.class-1 {
// something
}
.class-A {
// something
}
.class-2 {
// something
}
How can I write SASS that compiles like this:
.class-1,
.class-2 {
color: red;
}
Not like this:
.class-1 {
color: red;
}
.class-2 {
color: red;
}
The #extend feature does this, but it seems to have a lot of gotchas so Im not sure ill use it right away.