Question

让我们看看有2个盒子。我们想要一个边框为1px的紫色边框，而我们想要另一个边框为2px的红色边框，但前提是它在平板电脑上显示。

SCSS：

.brd {
  border-style: solid;
  &-thin {
    border-width: 1px;
    &-purple {
      border-color: purple;
    }
    &-red {
      border-color: red;
    }
  }
  &-thick {
    border-width: 2px;
    &-purple {
      border-color: purple;
    }
    &-red {
      border-color: red;
    }
  }
  &-from-tablet {
    @media only screen and (min-width: 768px) {
      &-thin {
        border-width: 1px;
        &-purple {
          border-color: purple;
        }
        &-red {
          border-color: red;
        }
      }
      &-thick {
        border-width: 2px;
        &-purple {
          border-color: purple;
        }
        &-red {
          border-color: red;
        }
      }
    }
  }
}

/*what I'd need*/

%colors {
  &-purple {
    border-color: purple;
  }
  &-red {
    border-color: red;
  }
}
%widths {
  &-thin {
    border-width: 1px;
    @extend %colors;
  }
  &-thick {
    border-width: 2px;
    @extend %colors;
  }
}
.brd {
  border-style: solid;
  @extend &widths;
  &-from-tablet {
    @media only screen and (min-width: 768px) {
      @extend &widths;
    }
  }
}

HTML：

<div class="brd-thin-purple"></div>
<div class="brd-from-tablet-thick-red"></div>

但是不幸的是，它不起作用。背后的想法是在类上构建查询以根据需要设置参数。

我想知道是否有可能不仅将css键值对存储在“变量”中，而且还存储类以及甚至嵌套的类扩展。

有什么想法吗？

Answer 1

您不能使用 SASS占位符来做到这一点。他们太有限了。而是使用 mixins ：

@mixin brd-color {
  &-purple {
    color: purple;
  }

  &-red {
    color: red;
  }
}

然后像这样引用它：@include brd-color;

使用SASS将类存储在扩展中

1 个答案: