Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
---
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](https://github.com/postcss/autoprefixer).
<%- @code('Content Directive', 'placeholder text') %>
To learn more about placeholder text styling I recommend reading this [great article by Treehouse](http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-element), it explains nicely what can and cannot be styled about the placeholder text.