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 :
-
@mediaqueries, -
keyframesanimation, - buttons,
- nested selectors,
- 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;
}
}
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%;
}
}
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;
}
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';
}
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;
}
}
References
Official SASS @content Docs
Sass’s @Content Directive - thoughtbot
SASS Content Directive Is A Wonderful Thing
Stackover Flow
Devcamp.com
Top comments (1)
Great article, thank you very much.
There is an error in the media queries syntax. You have to remove the semicolon:
@mixin small-screen {
@media screen and (min-width: 800px;) {
@content;
}
}
It should be:
@mixin small-screen {
@media screen and (min-width: 800px) {
@content;
}
}