Brad Beggs
Posted on February 5, 2021
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
💖 💪 🙅 🚩
Brad Beggs
Posted on February 5, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
programming 10 Essential Tips for Junior Frontend Developers to Excel in Their Career
November 10, 2024
webdev Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography
November 19, 2024