问Sass正在重组我的选择器，它破坏了功能

EN

/* 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;
}

// 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);
}