Skip to content

Instantly share code, notes, and snippets.

@lisacatalano

lisacatalano/SassMeister-input-HTML.html

Created October 24, 2015 16:15
Show Gist options
  • Save lisacatalano/d3ba7f6fc7ce0d26ea04 to your computer and use it in GitHub Desktop.
Save lisacatalano/d3ba7f6fc7ce0d26ea04 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="warning">Don't do it</div>
<div class="error">That is just wrong</div>
<div class="success">Yes!!!</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@mixin message($color) {
width: 30%;
margin: 30px auto;
height: 30px;
font: 20px sans-serif;
text-align: center;
background-color: fade-out($color, .7);
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
.warning {
@include message(yellow);
}
.error {
@include message(red);
}
.success {
@include message(green);
}
Raw
SassMeister-output.css
.warning {
width: 30%;
margin: 30px auto;
height: 30px;
font: 20px sans-serif;
text-align: center;
background-color: rgba(255, 255, 0, 0.3);
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
.error {
width: 30%;
margin: 30px auto;
height: 30px;
font: 20px sans-serif;
text-align: center;
background-color: rgba(255, 0, 0, 0.3);
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
.success {
width: 30%;
margin: 30px auto;
height: 30px;
font: 20px sans-serif;
text-align: center;
background-color: rgba(0, 128, 0, 0.3);
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
Raw
SassMeister-rendered.html
<div class="warning">Don't do it</div>
<div class="error">That is just wrong</div>
<div class="success">Yes!!!</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment