-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathcontent-directive.html.md.eco
34 lines (19 loc) · 1.52 KB
/
content-directive.html.md.eco
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
---
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.