Question

以下是已编译的代码：

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

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

首先是＆＃34; tile＆＃34;然后去＆＃34;大＆＃34;然后回到＆＃34; tile。＆＃34;有没有办法阻止它以这种方式编译？我尝试过以不同的方式嵌套，但没有。我不想想要创建2个完全不同的div，但我想如果我无法解决这个问题，我必须这样做。我打算让它变得更加复杂。我只想通过添加类来修改现有的div。

Answer 1

看起来它没有重新排序。根据编译的CSS，你的问题是你在两个不同的文件中实际上有两个不同的样式选择器.tile - 一个在_layout.scss中，一个在_style.scss中。首先放置_layout.scss中的定义（包括第一个.tile以及.large样式），然后放置_style.scss中的定义（包括第二组{{1}来自。

Sass正在重组我的选择器及其破坏功能

1 个答案: