DEV Community

loading...

SCSS @content Use Cases & Examples

Brad Beggs
Curious and Persistent.
・2 min read

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 @contentfor :

  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

// 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;
    }
}
Enter fullscreen mode Exit fullscreen mode

2. Keyframes/Animations

// 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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Buttons

// 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;
}
Enter fullscreen mode Exit fullscreen mode

4. Nested Selectors

// 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';
}
Enter fullscreen mode Exit fullscreen mode

5. Notifications

// 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;
  }
}
Enter fullscreen mode Exit fullscreen mode

References

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

Discussion (0)