时间戳

首页 > 解决方案 > 使用 SASS 将类存储在扩展中

html - 使用 SASS 将类存储在扩展中

问题描述

让我们看看我们有 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 键值对存储在“变量”中，还可以将类和类扩展甚至嵌套存储。

有任何想法吗？

标签： htmlsass

解决方案

你不能用SASS placeholders做到这一点。他们太有限了。而是使用mixins：

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

  &-red {
    color: red;
  }
}

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

推荐阅读