-
Notifications
You must be signed in to change notification settings - Fork 213
Closed
Labels
Description
I wanted to write a simple scss function that dynamically creates selectors based on some variables.
Unfortunately this does not work because using the parent selector "&" inside a string fails to compile properly.
Example:
.parent {
$sub: unquote(".child");
$self: unquote("&.self2");
&.self { // works perfectly
content: "should match .parent.self";
}
#{$sub} { // works as it should
content: "should match .parent .child";
}
#{$self} { // does not work (see below)
content: "should match .parent.self2";
}
}This should compile to (Tested in Sassmeister (http://sassmeister.com/gist/8916970) and CodeKit):
.parent.self {
content: "should match .parent.self";
}
.parent .child {
content: "should match .parent .child";
}
.parent.self2 {
content: "should match .parent.self2";
}but it actually compiles to:
.parent.self {
content: "should match .parent.self";
}
.parent .child {
content: "should match .parent .child";
}
.parent &.self2 { /* <-- not a valid selector */
content: "should match .parent.self2";
}Update:
I just wanted to add that he following is also not possible with scssphp
.parent {
$selfMultiple: unquote("&.self1, &.self2");
#{$selfMultiple} {
content: "should match .parent.self1, .parent.self2";
}
}Should compile to:
.parent.self1, .parent.self2 {
content: "should match .parent.self1, .parent.self2";
}Reactions are currently unavailable