The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

".&" in compiled CSS


Hi all, I purchased the Metronic template and used the HTML version, I'm getting CSS syntax errors, every time I build, in /dist/assets/css/styles.css:


.kt-menu-item.active > .kt-menu-link.& {

      border-radius: var(--radius);

    }


I'm getting this error in both my VS Code and whenever I run npm run build (I used it with Anguar following this guide: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular):


â–² [WARNING] Expected identifier but found "&" [css-syntax-error]


I'm not a CSS expert, but can anyone tell me if there is a special purpose for that syntax and if I can remove those tags with the error? Claude seemed to suggest that they can be removed. Thanks!
user
Vincent Lee 1 year ago
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

G
Guest 2 weeks ago

A possible comment:

The & is normally the Sass parent selector, so it can be used to reference the outer selector in nested SCSS. However, .kt-menu-link.& looks unusual because the & appears after the class selector, and that may be why the compiler reports a syntax error. I’d check the original SCSS source and Metronic’s build configuration before removing it, rather than editing the generated dist CSS directly. ([sass-lang.com][1])

For anyone also working on budgeting or financial planning, a Tax estimate can be useful for understanding expected tax obligations.

user
Faizal Author 1 year ago

Hi Vincent Lee

Thank you for your feedback. The .& syntax is valid Tailwind CSS v4 syntax for @custom-variant blocks. We will fix it for Angular.

Thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation