时间戳

首页 > 解决方案 > 将已定义的 CSS 添加到另一个 CSS

css - 将已定义的 CSS 添加到另一个 CSS

问题描述

标题有点混乱，让我告诉你。假设我在 CSS 文件中有以下内容：

#container_1 {
    width:50%;
    border:1px solid black;
    }

#container_2 {
    background-color:red;
    padding:5px;
}

如果我希望 container_2 具有 50% 的宽度和 1x 边框，与 container_1 相同，是否有某种方法可以定义 container_2 的 CSS，同时包括来自 container_1 的 CSS，而实际上不必为 container_2 的 CSS 放入 50% 的宽度和 1x 边框?

就像是：

#container_2 {
    include:#container_1;
    background-color:red;
    padding:5px;
}

谢谢

标签： css

解决方案

在 css 中，我们不能直接将一个类的属性继承到另一个类，但是为了简化这一点，我们可以编写上面的代码，如下所示：

#container_1,#container_2 {
    width:50%;
    border:1px solid black;
    }

#container_2 {
    background-color:red;
    padding:5px;
}

这样#container_2 将具有#container_1 的所有属性，除了它的独特属性。

或者

我们可以使用 Sass 来做同样的事情，Sass 有一个名为 @mixin 的功能，我们可以在其中实现这一点。

例如

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

有关更多详细信息，您可以访问 https://sass-lang.com/documentation/at-rules/mixin

推荐阅读