Skip to content

Parent Selector ("&") inside string does not work #149

@whytspace

Description

@whytspace

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";
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions