Super-simple theme, yet problem.

Hi, I have a very simple theme, the implementation of which is almost exactly the same as the example from the
, the only difference being that the background of
is set instead to make the effect clearer.


@import "../reindeer/reindeer.scss";
@mixin mytheme {
	@include reindeer;
	.v-app {
		background: red;


@import "mytheme.scss";
.mytheme {
	@include mytheme;

However, the background of the app is not red when this theme is used. The compiled style ends up like this:

.mytheme .v-app {
	background: red;

Inspecting the
div, I see that the style isn’t being considered for the component, but a style for
is (i.e. no space between the parts). If I manually edit the
so that there’s no space between the
and the
the style is applied as I expect. Any ideas what’s going on?


where the “&” tells where to insert the parent selector. By default, it is separated from the child with a space.

Thanks a lot!
What is the significance of the space? Is there some logic that decides which properties have spaces and which do not?

See the
CSS specification
, especially the part about class selectors.

A space means the next one is on a descendent of the first part of the selector (not the same element), no space means that both classes should be on the same element.
(Disclaimer: I’m not a CSS specialist and my terminology might be a bit off.)

Great, thanks! I’m returning to CSS after a long time, even so, I’m surprised I forgot/never knew this!
Thanks, Dan.