sass @include이 (가) 다른 방식으로 작동 중입니다

Question

웹 응용 프로그램 중 하나에서 아래 코드를 발견했습니다. 아래에서 언급 한 것처럼 CSS가 생성됩니다.이 include가 내가 알고있는대로 작동하는 방식을 이해할 수는 없습니다. calling하지만 내부 코드가있는 {}을 볼 수있었습니다.

말대꾸 코드

.sendfile-header-title { 

     @include viewport(small) { 
     text-align: center; 
     display: block; 
     border-bottom: solid 1px $secondary-gray; 
     background: red; 
     } 

    } 

CSS 코드

@media only screen and (max-width: 735px) and (max-device-width:768px) { 
     .sendfile-header-title { 
      text-align:center; 
      display: block; 
      border-bottom: solid 1px #e0e0e0; 
      background: red; 
     } 
    } 

Answer 1

당신은 믹스 인을 호출하는 @include을 사용하여 생성됩니다. 많이 도와주었습니다

//This way you define a mixin 
@mixin viewport($breakpoint) { 
    @if $breakpoint == small { 
     @media only screen and (max-width: 735px) and (max-device-width:768px) { 
      @content; 
     } 
    } 
    @else ... 
} 



//This way you use a mixin 
.sendfile-header-title { 

    @include viewport(small) { 
     //code ritten here will replace the @content inside the mixin 
     //so the output in the css file will be a @media query applied to this element with the following code inside 

     text-align: center; 
     display: block; 
     border-bottom: solid 1px $secondary-gray; 
     background: red; 
    } 

} 


//The css output will be: 

//the @media query 
@media only screen and (max-width: 735px) and (max-device-width:768px) { 
    //the element 
    .sendfile-header-title { 
     //the code 
     text-align:center; 
     display: block; 
     border-bottom: solid 1px #e0e0e0; 
     background: red; 
    } 
}