Skip to content

Instantly share code, notes, and snippets.

@jensgro
Last active August 29, 2015 14:06
Show Gist options
  • Save jensgro/378094bd2c3d86487e1e to your computer and use it in GitHub Desktop.
Save jensgro/378094bd2c3d86487e1e to your computer and use it in GitHub Desktop.
Sass-variables and generated content.
<h1>!</h1>
<h2>You can combine</h2>
<h3>include a variable into "content"</h3>
// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----
$content: "This is the easy way";
$combinated-content: " normal content with CSS-generated content!";
$content-super-safe: "This is the super safe way to ";
h1, h2, h3 { font-size: 1.75rem;}
h1 {
color: red;
&:before {
content: $content;
display: inline-block;
}
}
h2 {
color: #2344ff;
&:after{
content: $combinated-content;
display: inline-block;
white-space: pre;
}
}
h3 {
color: darkgreen;
&:before {
content: quote($content-super-safe);
}
}
h1, h2, h3 {
font-size: 1.75rem;
}
h1 {
color: red;
}
h1:before {
content: "This is the easy way";
display: inline-block;
}
h2 {
color: #2344ff;
}
h2:after {
content: " normal content with CSS-generated content!";
display: inline-block;
white-space: pre;
}
h3 {
color: darkgreen;
}
h3:before {
content: "This is the super safe way to ";
}
<h1>!</h1>
<h2>You can combine</h2>
<h3>include a variable into "content"</h3>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment