Namespaces for Less Css are not recognised

Rules and Languages Report False-positive / False-negative...
1

Versions used:

  • SonarQube: Enterprise Edition, Version 8.9 (build 43852),
  • Scanner: sonar-scanner-cli-4.6.2.2472-windows,
  • language analyzer: JS, Typescript, Less

Namespace declaration:

#themes() {
	.light() {
		@overlay: @white;
		@checkbox-buttons-border: @color-alto;
		@checkbox-hover-color: @color-concrete;
	}
	.dark() {
		@overlay: @color-black;
		@checkbox-buttons-border: @color-emperor;
		@checkbox-hover-color: @color-mine-shaft;
	}
}

Namespace usage:

@{light-theme-selector} & {
	background-color: #themes.light[ @overlay];
}

Sonar error after code analysis:

“Unexpected invalid hex color “#themes””