如何重用 SASS 风格答案

【问题标题】：How to reuse SASS style如何重用 SASS 风格
【发布时间】：2023-04-04 08:10:02
【问题描述】：

我正在构建一个 ReactJS 应用程序并使用 Zurb Foundation 6。我也在使用 React Modal：https://reactcommunity.org/react-modal/#documentation。

我想让通过 React Modal 启动的 Modal 看起来像 Zurb Foundation 的 Reveal。 Reveal SASS 看起来像这样：

// 28. Reveal
// ----------

$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);

而我的 Modal CSS 是这样的：

.modal {
  position: absolute;
  width: 600px;
  top: 20%;
  left: 20%;
  right: 20%;
  bottom: 20%;
  background-color: $white;
}

.OverlayClass {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($black, 0.45);
}

我怎样才能做到这一点？我一直在尝试@include，但没有成功。目前，我拥有的莫代尔并不美观。非常感谢您的帮助。

【问题讨论】：

标签： css sass zurb-foundation

【解决方案1】：

.your-modal {
@extend .reveal;

/* write your custom css here */
}

现在您只需将.your-modal 用于模态容器，而不是使用.reveal。

【讨论】：

【解决方案2】：

您拥有的基础部分只是显示的配置变量。用于展示的 .scss 的其余部分在这里 https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss

您应该能够从您的组件构建呈现的 HTML 以匹配 Foundation 中的元素和类，只需避免使用 Foundation JS。

【讨论】：