SASSスタイルを再利用する方法

Question

私はReactJSアプリケーションを構築しており、Zurb Foundation 6を使用しています。リアクタンスモーダル：https://reactcommunity.org/react-modal/#documentationも使用しています。

私はZurb FoundationのRevealのように見えるようにReact Modalで起動されたModalをスタイルしたいと思います。

// 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); 

そして、私のモーダル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); 
} 

どのように私はこれを達成することができますか？SASSはこのようになります明らかに私は@includeを試していますが、成功はありません。現時点では、私が持っているモーダルは美的には満足です。ヘルプは非常に高く評価されます。

Answer 1

あなたが持っている基礎セクションには、公開の設定変数があります。公開の.scssの残りの部分はここにありますhttps://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss

Foundationからの要素とクラスと一致するように、コンポーネントからレンダリングされたHTMLを構造化することができます。代わりに.revealを使用しての

Answer 2

.your-modal { 
@extend .reveal; 

/* write your custom css here */ 
} 

、今あなただけのモーダルコンテナの開始.your-modalを使用する必要があります。