Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
35 lines (19 sloc) 1.52 KB
layout: "post"
title: "Content Directive"
date: 2014-08-04
description: "Uses for the <code>@content</code> directive, pre-built selectors, placeholders pseudo element, media query mixins"
The @content directive is a way to pass a block of styles to a [mixin](/mixins), this is useful in cases when you don't want to limit your future self in terms of number of parameters a mixin can accept.
## Basic use
The @content directive allows you to use a common set of selectors everywhere you declare a mixin.
<%- @code('Content Directive', 'basic') %>
Notice that for Stylus, we need a `+` before calling the mixin every time when you're passing content to it (below it, indented).
## Simpler media queries
You can use the @content directive to simplify your responsive styles:
<%- @code('Content Directive', 'media') %>
## Placeholder pseudo element
Another very useful case where the @content directive can help is when defining styles for placeholder text - you can put a @content directive in each vendor-specific selector (can also be used for keyframes which are still prefixed).
An alternative to the code snippets below would be to just use [Autoprefixer](
<%- @code('Content Directive', 'placeholder text') %>
To learn more about placeholder text styling I recommend reading this [great article by Treehouse](, it explains nicely what can and cannot be styled about the placeholder text.