깔끔하게 미디어 쿼리를 생성 할 때 출력이 잘못되는 이유

Question

좋아요, 그래서 덤프를 사용하여 CSS로 컴파일하기 위해 SASS를 사용하는 프로젝트가 있고 그리드 시스템에 Bourbon과 Neat을 사용합니다. 나는 다음이 아직 반응이 없다는 것을 이상하게 생각한다.

옥 템플릿 :

article.fleet 
     .container 
      .row 
       .image-container 
        img(src="images/image.svg") 
       .text-container 
        p text 

SASS는 다음

.container 
    +outer-container 
    p 
    color: #493F3F 
    line-height: $font-size-base * $line-height-lg 
    article.story 
     height: 450px 
     p 
      +span-columns(6) 

그리고 동안 나는 내가 @include media($mobile)의 출력을 사용할 때 내가 발견 $mobile: @mixin new-breakpoint(max-width 480px 4)

에 중단 점을 설정하여 테스트하려고 컴파일 된 CSS는 다음과 같습니다.

@media screen and (min-width: (+max-width) 480px 4) { 
     section.hero h1 { 
     font-size: 18px; } 

왜 출력합니까 (min-width: (+max-width) 480px 4) ... 깔끔한 무엇인가 잘못 되었나요?

Answer 1

중단 점을 잘못 작성하는 중입니다. new-breakpoint mixin에는 @mixin 선언이 필요 없습니다. 따라서 다음과 같이 변경해야합니다.

$mobile: new-breakpoint(max-width 480px 4); 

코드에서 시도하지는 않지만 제대로 작동한다고 생각합니다.

건배.