미디어 쿼리를 기반으로 다른 최고 막대 가로

Question

$topbar-height 변수를 기본값보다 높은 특정 값으로 설정했습니다.

모바일 버전의 경우 기본값을 유지하고 싶습니다.

어떻게하면됩니까?

높이 변수 값이 .topbar 일 때만 바꿀 수 있습니다.이 변수는 다른 많은 특성 (예 : 줄 높이, 채우기, 여백 등)에서 Foundation에서 사용됩니다.

Answer 1

기본 제공품으로는 불가능합니다. 나는 다음과 같은 사용자 지정 기능을 얻기 위해 과거에 두 가지 일을했습니다.

1) 변경 사항을 적용하려면! important를 추가하여 app.scss의 CSS 클래스를 덮어 씁니다.

또는

2

)가 zurb 재단 보석에서 유지 mixin과 HTML 클래스 생성 말대꾸를 복사 (app.scss 또는 새 파일 중 하나를 예를 foundation/components/top-bar.scss) 를 들어, 다음 더 이상 그래서 app.scss을 수정하지 이 경우

012에서 재정의 할 파일을 제외하고

// @import "foundation"; 

그것을 주석 및 다른 모든 것들을 가져 와서 담요 가져 오기를 사용 (개발, 그러나 부분 만 나는 생산을 위해 필요)

일단 그렇게하면 html 생성 또는 mixins를 수정하거나 원하는대로 미디어 쿼리를 추가 할 수 있습니다.

이런 식으로 수정하면 이후 버전의 Zurb Foundation에서 중단 될 수 있습니다.

Answer 2

내가 그런 일을하는 것은 작동 사실을 발견했습니다

@media #{$small} { 
    $topbar-height: 85px; 
    @import "foundation/components/top-bar"; 
... 
} 

어쩌면 가장 깨끗한 방법 아니다 (이 중복 CSS를 생성하면 내가 확인해야합니다)하지만 난 생각에도이 무엇을 선호 @ 제임스도 잘 대답합니다 (아마도 제작 된 CSS와 관련하여 더 깨끗한 방법 일 것입니다).

나는 실제 top-bar mixin이이 문제를 해결할 것이라고 생각합니다. 제안으로 추가하겠습니다.