John Davidson

Message:

I am trying to apply a function to an id and nest them inside an element.

Basically I want to nest this (which works):

element#idname .functionname {...}

and I want it to look like this:

element {

  #idname.functionname {...}

}

I've played around with & and spaces without success. Is it even possible? I can't find anything on nesting ids in SCSS/SASS.

---

My Answer:
In SCSS/SASS, it is not recommended to nest IDs as it goes against best practices for CSS specificity. IDs are meant to be unique identifiers for elements on a page and should not be nested within other selectors.

However, if you still want to achieve the nesting you described, you can use interpolation in SCSS to achieve this. Here's an example of how you can nest IDs using interpolation:

scss
$element: "element";
$idname: "idname";
$functionname: "functionname";

.#{$element} {
&##{$idname}.#{$functionname} {
// styles here
}
}


This will output the following CSS:

css
element #idname.functionname {
/* styles here */
}


Again, it is not recommended to nest IDs in SCSS/SASS. It's better to use classes for styling and keep IDs for unique element identification.