SCSS @ content useケース&例

@ content,aka contentディレクティブは,反復コードを減らす方法を提供し,コードベースを通して再利用と容易な変更を可能にする方法を提供するという点で「簡単」である.
しかし、使用するときに知っている@content 事前にタッチが難しいです.ここでは、ウェブの周りから少なくとも5つの一般的なユースケースと例です.

コンテンツディレクティブの使用例@content用途@content のために

@media クエリ

keyframes アニメーション

ボタン

入れ子になったセレクタ

通知

あなたが他の時間をあなたが使うならば@content , 他のユースケースを見ることができるようにコメントをドロップします.

これは誰ですか.
scssを使用したい場合は、複数の例/コンテキストを使用します@content .

メディア質問

// from riptutorial

// located in _mixin.scss partial file
@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

// located in /modules/_media.scss partial file
@include small-screen {
  .container {
    width: 600px;
  }
}

// above mixin and @media become:
@media screen and (min-width: 800px;) {
   .container {
      width: 600px;
    }
}

2 .フレーム/アニメーション

// from thoughthot

// located in _mixin.scss partial file
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

// located in modules/_keyframes.scss
@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

// The above mixin and @contents compiles into styles.css:
@-webkit-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

ボタン

// from Krasimir.dev

// located in _mixin.scss partial file
@mixin button() {
    display: block;
    font-size: 20px;
    text-decoration: none;
    @content;
}

// located in _interfaces.scss partial file
.alert {
    @include button {
        color: #F00;
    }
}
.cancel {
    @include button {
        border: solid 1px #999;
    }   
}

// The above mixin and @contents compiles into styles.css:
.alert {
    display: block;
    font-size: 20px;
    text-decoration: none;
    color: #F00;
}
.cancel {
    display: block;
    font-size: 20px;
    text-decoration: none;
    border: solid 1px #999;
}

入れ子セレクタ

// from Stackoverflow/piouPiouM

// located in _mixin.scss partial file
@mixin context--alternate-template {
  margin: 0;
  font-size: 14px;
  @content
}

// located in _base.scss partial file
.content-sample {
  @include context--alternate-template {
    .important-thing {
      color: red;
    }
    &.is-italic {
      font-family: 'my-webfont-italic';
    }
  }

// outside mixin call
  background-color: black;
}

// The above mixin and @contents compiles into styles.css:
.content-sample {
  margin: 0;
  font-size: 14px;
  background-color: black;
}
.content-sample .important-thing {
  color: red;
}
.content-sample.is-italic {
  font-family: 'my-webfont-italic';
}

通知

// from devcamp.com

// located in _mixin.scss partial file
@mixin notification {
  width: 99%;
  height: 35px;
  text-align: center;
  padding-top: 10px;
  font-size: 1.2em;
  font-family: Verdana;
  border-radius: 3px;
  margin: 10px;
  @content;
}

// located in _notifications.scss partial file
.error {
  @include notification {
    background-color: DarkRed;
    color: white;
    border: 1px solid LightSlateGray;
  }
}

.success {
  @include notification {
    background-color: MediumSeaGreen;
    color: MintCream;
    border: 1px solid LightSalmon;
  }
}

参考文献
Official SASS @content Docs
Sass’s @Content Directive - thoughtbot
SASS Content Directive Is A Wonderful Thing
Stackover Flow
Devcamp.com