SASS 스타일을 다시 사용하는 방법

Question

ReactJS 앱을 만들고 Zurb Foundation 6을 사용하고 있습니다. React Modal : 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는 다음과 같이이다 : :이 공개 SASS는 다음과 같습니다

.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를 실험했지만 성공하지 못했습니다. 현재 모달은 예술적으로 기쁘지 않습니다. 도움말 크게 감사드립니다.

Answer 1

당신이 가진 기초 섹션은 계시를위한 구성 변수입니다. 공개에 대한 .scss의 나머지 부분은 여기

Foundation의 요소 및 클래스와 일치하도록 구성 요소에서 렌더링 된 HTML을 구조화 할 수 있어야합니다. Foundation JS를 피하십시오. 대신 .reveal를 사용

Answer 2

.your-modal { 
@extend .reveal; 

/* write your custom css here */ 
} 

, 지금 당신은 모달 컨테이너의 시작 .your-modal를 사용해야합니다.