Chain nested SCSS argements - css

Question

Is there any solution how to convert this:
[class*="needle"]:not([class*="__front"], [class*="__back"]) {
position: absolute;
}
to this:
[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
position: absolute; }
using a SCSS compiler?
I only get:
[class*="needle"]:not([class*="__front"], [class*="__back"]) {
position: absolute;
}
that cannot be interpreted by most browsers.
Many thanks.

Answer 1

I would make use of SCSS for the reason it developed, to make syntax pretty and easy to understand.
[class*="needle"]{
&:not([class*="__front"]){
&:not([class*="__back"]) {
position: absolute;
}
}
}
Should work. Here, & is used to refer the parent. Once you compile it, the resulting CSS would be
[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
position: absolute;
}
Sorry, I read the question wrong. The above conversion is not possible in SCSS, as that's neither proper CSS syntax nor SCSS syntax.
Currently, :not() selector does only simple matches. The above syntax is a valid one for level 4 selectors, which is in working draft and mostly not available in any browsers.
Also,
<Selector>:not(<Condition1>):not(<Condition2>) {
position: absolute;
}
is not ,
<Selector>:not(<Condition1>,<Condition2>) {
position: absolute;
}
where as first method acts as AND, second one acts as OR.
MDN Docs
W3C Docs