SCSS @content Use Cases & Examples
Tags: css, design
Published: 2021-02-05 21:07:12

The @content, aka content directive, is “simple” in that it provides a way to reduce repetitive code, allowing for reuse and easier changes throughout the codebase.

But knowing when to use `@content` in advance is a touch harder. Here are at least 5 common use cases and examples from around the web.

### Uses Cases for The Content Directive, aka  `@content`
Use `@content`for :
1. `@media` queries, 
2. `keyframes` animation, 
3. buttons, 
4. nested selectors,
5. notifications

If you have other times you use `@content`, drop a comment so others can see other uses cases.

### Who Is This For?
Newish to using SCSS and would like multiple examples/context for how to use the `@content`.


### 1. @media Queries
 ```scss
// 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. Keyframes/Animations
```scss
// 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%;
  }
}
```





### 3. Buttons
```scss
// 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;
}
```

### 4. Nested Selectors
```scss
// 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';
}
```

### 5. Notifications
```scss
// 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;
  }
}
```




### References
[Official SASS @content Docs](https://sass-lang.com/documentation/at-rules/mixin#content-blocks)
[Sass’s @Content Directive - thoughtbot](https://thoughtbot.com/blog/sasss-content-directive)
[SASS Content Directive Is A Wonderful Thing](https://krasimirtsonev.com/blog/article/SASS-content-directive-is-a-wonderful-thing)
[Stackover Flow](https://stackoverflow.com/questions/37205463/sasss-content-directive-use-cases)
[Devcamp.com](https://devcamp.com/trails/styling-scss/campsites/advanced-scss/guides/how-use-content-directive-in-scss-allow-mixin-flexibility)