0

以下のコードは、以下で説明するようにcssを生成しているWebアプリケーションの1つで見つかりました。インクルードは一種の関数呼び出しであることを認識しているため、このインクルードがどのように機能するかを理解できませんが、{}をいくつか見ることができました中のコード。

サスコード

   .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;
        }
    }
4

1 に答える 1

2

@include を使用して mixin を呼び出します。

コード例でプロセスを説明しましょう。

//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;
    }
}
于 2016-07-13T11:10:19.927 に答える