文章/答案/技术大牛

发布

社区首页 >问答首页 >用SASS在扩展中存储类

问用SASS在扩展中存储类
EN

Stack Overflow用户

提问于 2019-06-06 08:53:39

回答 1查看 13关注 0票数 0

让我们看看我们有两个盒子。我们想要一个宽度为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键值对存储在“变量”中，还可以存储类和类扩展，甚至嵌套类扩展。

有什么想法吗？

html

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-06 09:03:44

SASS占位符不能这样做。它们太有限了。相反，请使用mixins

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

  &-red {
    color: red;
  }
}

然后引用如下：@include brd-color;

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56474069

复制

相似问题

问用SASS在扩展中存储类
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用SASS在扩展中存储类EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用SASS在扩展中存储类
EN