Skip to content

Instantly share code, notes, and snippets.

@SandyLudosky

SandyLudosky/SassMeister-input-HTML.html

Created December 1, 2014 00:09
Show Gist options
  • Save SandyLudosky/b70bb3602a30bdda0a75 to your computer and use it in GitHub Desktop.
Save SandyLudosky/b70bb3602a30bdda0a75 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<body>
<h1>Sass - Extend</h1>
<div class="box"><h4>Grey Box</h4></div>
<div class="box success"><h4>Green Box</h4></div>
<div class="box error"><h4>Red Box</h4></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// Place Holders & Extends
// Color Variables
$grey-light: #ddd;
$grey-dark: #444;
$red:#e74c3c;
$red-light: lighten($red, 20);
$red-dark: darken($red, 20);
$red-extradark: darken($red, 30);
$green: #2ecc71;
$green-light: lighten($green, 20);
$green-dark: darken($green, 20);
$green-extradark: darken($green, 30);
// Layout Variables
$margins: 1em;
$padding: 1em;
$border: 1px solid $grey-dark;
// custom css properties for success and error
@mixin custom ($width:1px, $border_color:$grey-dark, $bg_color:$grey-light, $text_color:$grey-dark ) {
border: $width solid $border_color;
background: $bg_color;
color: $text_color;
}
//Placeholders
%checkmark {
&:after{
content: "\2713 ";
margin-left: 1em;
}
}
h1 {
border: $border;
text-align:center;
margin: $margins;
padding: $padding;
}
h4 {
font-weight: bold;
}
.box {
margin: $margins;
text-align: center;
@include custom;
}
.success {
//@extend .box;
}
.error {
//@extend .box;
}
footer {
text-align: center;
a {
text-decoration: none;
color: $red-dark;
&:hover, &:active, &:focus {
color: $red-extradark;
}
}
}
Raw
SassMeister-output.css
h1 {
border: 1px solid #444444;
text-align: center;
margin: 1em;
padding: 1em;
}
h4 {
font-weight: bold;
}
.box {
margin: 1em;
text-align: center;
border: 1px solid #444444;
background: #dddddd;
color: #444444;
}
footer {
text-align: center;
}
footer a {
text-decoration: none;
color: #a82315;
}
footer a:hover, footer a:active, footer a:focus {
color: #7b190f;
}
Raw
SassMeister-rendered.html
<html>
<body>
<h1>Sass - Extend</h1>
<div class="box"><h4>Grey Box</h4></div>
<div class="box success"><h4>Green Box</h4></div>
<div class="box error"><h4>Red Box</h4></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment