如何重用 scss 模块并将其应用于具有不同 id 名称的其他 Web？答案

【问题标题】：How to reuse and apply scss module to other web with different id names?如何重用 scss 模块并将其应用于具有不同 id 名称的其他 Web？
【发布时间】：2021-08-21 03:16:22
【问题描述】：

我正在学习 css/scss。我想制作一个 scss 模块，其他人也可以以最简单的方式在他们的应用程序中使用它。我希望其他人只需要更改 id 名称并可以使用它。比如我有一个模块_buttons.scss:

.btn {
  position: relative;
  background: #27022d;
  color: #fff;
  transition: 500ms;
  background-image: (linear-gradient(270deg, #8e9ac2, #42579a));
  background-size: 400% 400%;
  animation: TransitioningBackground 10s ease infinite;

  &:hover {
    background-image: (linear-gradient(to left, #2d8fe5, #d155b8));
    transform: scale(1.05);
    cursor: pointer;
  }
  // shine animation left side
  &::before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    transform: translateX(-100px) skewX(-15deg);
  }
  // shine animation right side
  &::after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    width: 30px;
    height: 100%;
    top: 0;
    filter: blur(5px);
    transform: translateX(-100px) skewX(-15deg);
  }

  &::before, &::after {
    transform: translateX(300px) skewX(-15deg);
    transition: 0.7s;
  }
}

@keyframes TransitioningBackground {
  0% {
    background-position: 1% 0%;
  }
  50% {
    background-position: 99% 100%;
  }
  100% {
    background-position: 1% 0%;
  }
}

如何将所有东西包装成一个函数或模块，并能够应用于其他具有不同ID名称的btn，例如<btn id="test-me1">？

谢谢！

【问题讨论】：

标签： html css sass mixins scss-mixins

【解决方案1】：

你正在做的是设计一个框架。

现代 CSS 框架包括 Bootstrap、Foundation、Bulma、UIKit 等。

他们所做的是提供预制的 CSS 供您在组件上使用。除了边缘情况外，这使您可以制作网站而不必过多地使用 CSS。相反，您只需提供与您想要的样式相对应的相关元素类名称。

通常，具有相同 ID 的多个元素是bad practice。这是因为您使用 ID 来引用按钮等元素，或在重定向时滚动导航页面。 ID 是唯一的，这一点很重要，因此您不希望通过它们应用框架中的样式。

您应该做的是，一旦您完成了自定义框架的构建，您可以在线托管它，并让人们使用 <head></head> 标记内的 <link rel="stylesheet" href="LINK_HERE"> 导入它，就像您在正常情况下所做的那样导入的样式表。

现在您的 CSS 框架已导入他们的网站，他们可以应用您创建的类，只需将它们添加到类属性即可。

.red_background {
  background: red;
}

.blue_text {
  color: blue;
}

.green_border {
  border: 2px solid green;
}

.fat_margin {
  margin: 64px 0;
}

<div class="red_background blue_text green_border">This should have a red background, blur text, and green border... how ugly!</div>
<div class="blue_text green_border">Sometimes we might only want certain properties, however.</div>
<div class="fat_margin blue_text">We can use any of the classes we defined in our stylesheet to style our components. the .fat_margin class adds a massive margin to this element!</div>

【讨论】：