Skip to content

Instantly share code, notes, and snippets.

@lisacatalano

lisacatalano/SassMeister-input-HTML.html

Created October 24, 2015 16:21
Show Gist options
  • Save lisacatalano/c2c3cf6f73a796c73fff to your computer and use it in GitHub Desktop.
Save lisacatalano/c2c3cf6f73a796c73fff 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)
// ----
.message {
width: 30%;
margin: 30px auto;
height: 30px;
font: 20px sans-serif;
text-align: center;
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
.warning {
@extend .message;
background-color: fade-out(yellow, .7);
}
.error {
@extend .message;
background-color: fade-out(red, .7);
}
.success {
@extend .message;
background-color: fade-out(green, .7);
}
Raw
SassMeister-output.css
.message, .warning, .error, .success {
width: 30%;
margin: 30px auto;
height: 30px;
font: 20px sans-serif;
text-align: center;
padding: 10px;
border: 1px solid #444;
border-radius: 5px;
}
.warning {
background-color: rgba(255, 255, 0, 0.3);
}
.error {
background-color: rgba(255, 0, 0, 0.3);
}
.success {
background-color: rgba(0, 128, 0, 0.3);
}
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>
Copy link

ghost commented Oct 24, 2015

All pushing and pulling of private data is done over SSH authenticated with keys, or over HTTPS using your GitHub ,!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment