如何重用 scss 模块并将其应用于具有不同 ID 名称的其他网站？

Question

我正在学习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">？

谢谢！

Answer 1

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

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

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

一般来说，拥有多个ID相同的元素就是bad practice。这是因为您使用 ID 来引用按钮等元素，或者在重定向时滚动导航页面。 ID 的唯一性很重要，因此您不想通过这些应用框架中的样式。

你应该做的是，一旦你完成了自定义框架的构建，你就可以在线托管它，并让人们使用 <head></head> 标签内的 <link rel="stylesheet" href="LINK_HERE"> 导入它，只是就像你如何处理普通的导入样式表一样。

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

.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>

如何重用 scss 模块并将其应用于具有不同 ID 名称的其他网站？

How to reuse and apply scss module to other web with different id names?

html

css

sass

mixins

scss-mixins