Super-simple theme, yet problem.

Flow
1

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


mytheme.scss
:

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


styles.scss
:

@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
v-app
 div, I see that the style isn’t being considered for the component, but a style for
.mytheme.v-app
 is (i.e. no space between the parts). If I manually edit the
styles.css
 so that there’s no space between the
.mytheme
 and the
.v-app
 the style is applied as I expect. Any ideas what’s going on?

Pre-thanks,
Dan.

2

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

3

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

4

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.)

5

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