Issue
The following is meant to toggle stylesheets:
body.light {
background: var(--bg);
color: var(--text);
& a {
color: var(--link_color);
}
}
body.dark {
color: var(--bg);
background: var(--text);
& a {
color: white;
}
}
This snippet is in the last loaded file, amongst a few CSS files.
Problem: while the attributes are executed properly, the nesting for the selectors is not being picked up (It was expected the ampersand was the proper way to go).
There is a framework CSS file (loaded before the file where this code is placed) and it is those attributes that are executed.
What are the syntactic requirements to run properly nested selectors (be they native tag selectors (such as `a) or user-defined selectors?
update
The theme is being generated via a cookies[:theme]
and the body tag adopts it this way:
<body class="<%= cookies[:theme] %>">
Solution
To make it work in regular CSS, rewrite without use of &
.
Exmaple:
body.light {
background: var(--bg);
color: var(--text);
}
body.light a {
color: var(--link_color);
}
body.dark {
color: var(--bg);
background: var(--text);
}
body.dark a {
color: white;
}
Regarding the ampersand, according to Sass document:
The parent selector,
&
, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
Currently, usage of &
will require a css preprocessor like Sass, and also the &
is widely adopted by many syntax such as Sass, SCSS, Less.
Answered By - John Li
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.