Sass is reorganizing my selectors and it's breaking functionality

Question

Here's the compiled code:

/* line 5, ../scss/_layout.scss */
.tile::after, .tile::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
}

/* line 16, ../scss/_layout.scss */
.tile {
  width: 40px;
  width: 2.5rem;
  height: 40px;
  height: 2.5rem;
  margin-top: 8px;
  margin-top: 0.5rem;
  margin-left: 4px;
  margin-left: 0.25rem;
  position: relative;
}

/* line 23, ../scss/_layout.scss */
.tile::after {
  width: 40px;
  width: 2.5rem;
  height: 40px;
  height: 2.5rem;
  top: 4px;
  top: 0.25rem;
}

/* line 30, ../scss/_layout.scss */
.tile::before {
  width: 48px;
  width: 3rem;
  height: 44px;
  height: 2.75rem;
  top: 4px;
  top: 0.25rem;
  left: -4px;
  left: -0.25rem;
}

/* line 40, ../scss/_layout.scss */
.large {
  width: 248px;
  width: 15.5rem;
  height: 248px;
  height: 15.5rem;
}

/* line 46, ../scss/_layout.scss */
.large::after {
  width: 248px;
  width: 15.5rem;
  height: 248px;
  height: 15.5rem;
}

/* line 51, ../scss/_layout.scss */
.large::before {
  width: 256px;
  width: 16rem;
  height: 252px;
  height: 15.75rem;
}

/* line 5, ../scss/_style.scss */
.tile {
  border-radius: 4px;
  border-radius: 0.25rem;
  background: gray;
}

/* line 11, ../scss/_style.scss */
.tile::after {
  border-radius: 4px;
  border-radius: 0.25rem;
  background: red;
}

/* line 17, ../scss/_style.scss */
.tile::before {
  border-radius: 8px;
  border-radius: 0.5rem;
  background: black;
}

/* line 23, ../scss/_style.scss */
.tile:hover {
  background: cyan;
}

/* line 26, ../scss/_style.scss */
.tile:hover::after {
  background: orange;
}

/* line 29, ../scss/_style.scss */
.tile:hover::before {
  background: blue;
}

The scss:

// Layout


// Pseudo
%pseudo{
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
}

// Default
$width: 48;
$height: 48;

.tile{
    @include size($width - 8, $height - 8);
    @include rem-box(margin, 8, x, x, 4);
    position: relative;
}

// Depth
.tile::after{
    @extend %pseudo;
    @include size($width - 8 , $height - 8);
    @include position(4, x, x, x);
}

// Border
.tile::before{
    @extend %pseudo;
    @include size($width, $height - 4);
    @include position(4, x, x, -4);
}

// Large
$width: 256;
$height: 256;

.large{
    @include size($width - 8, $height - 8);
    //@include rem-box(margin, x, x, x, 4);
}

// Depth
.large::after{
    @include size($width - 8 , $height - 8);
}

// Border
.large::before{
    @include size($width, $height - 4);
}

It starts with "tile" then goes to "large" then back to "tile." Is there a way to prevent it from compiling this way? I've tried nesting it differently, but nothing. I don't want to create 2 completely different divs, but I guess I'll have to if I can't solve this problem. I plan on making this a lot more complex. I just want to modify an existing div by adding classes.

Answer 1

It doesn't look like it is reordering anything. According to the compiled CSS, your problem is that you have actually two different styles for the selector .tile in two different files — one in _layout.scss and one in _style.scss. The definitions from _layout.scss (which include the first .tile as well as the .large styles) are placed first, and then the definitions from _style.scss (which include the second set of .tile styles) come after.