Skip to content

Instantly share code, notes, and snippets.

@lucasan

lucasan/SassMeister-input-HTML.html

Created March 25, 2014 21:28
Show Gist options
  • Save lucasan/9771767 to your computer and use it in GitHub Desktop.
Save lucasan/9771767 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head>
<title>A title</title>
</head>
<body>
<div class="content">
<h1>A heading</h1>
<p>A text</p>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
//You can define variables.
//BTW, comments like this won't compile in your CSS
$main_fg_color: #666;
$secondary_fg_color: #333;
h1 {
font-size: 20px;
color: $main_fg_color;
}
p {
color: $main_fg_color;
}
.content {
overflow: hidden;
background-color: #F6F6F6;
}
.content h1 {
font-size: 18px;
color: $secondary_fg_color;
}
.content p {
font-size: 12px;
text-shadow: 1px 1px 0 #000;
color: $secondary_fg_color;
}
.content p a {
color: $main_fg_color;
text-decoration: none;
}
Raw
SassMeister-output.css
h1 {
font-size: 20px;
color: #666666;
}
p {
color: #666666;
}
.content {
overflow: hidden;
background-color: #F6F6F6;
}
.content h1 {
font-size: 18px;
color: #333333;
}
.content p {
font-size: 12px;
text-shadow: 1px 1px 0 #000;
color: #333333;
}
.content p a {
color: #666666;
text-decoration: none;
}
Raw
SassMeister-rendered.html
<html>
<head>
<title>A title</title>
</head>
<body>
<div class="content">
<h1>A heading</h1>
<p>A text</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment