Skip to content

Instantly share code, notes, and snippets.

@finteractive

finteractive/SassMeister-input-HTML.html

Created January 20, 2014 03:01
Show Gist options
  • Save finteractive/8514211 to your computer and use it in GitHub Desktop.
Save finteractive/8514211 to your computer and use it in GitHub Desktop.
Download ZIP
4. %placeholders with @extends
Raw
SassMeister-input-HTML.html
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
// Place Holders & Extends
// Color Variables
$grey-light: #ddd;
$grey-dark: #444;
$red: #ffaaaa;
$red-dark: darken($red, 50);
$red-extradark: darken($red, 80);
$green: #aaffaa;
// Layout Variables
$margins: 2em;
$padding: 1em;
// Let's use a placeholder to add a checkmark
// to the default messages & the success not on error
// Noticed there is not .checkmark in the css
%checkmark {
&:after{
content: "\2713 ";
margin-left: 1em;
}
}
//// BEFORE
.message-box {
background-color: $grey-light;
border: 1px solid $grey-dark;
margin: $margins;
padding: $padding;
text-align: center;
}
.message-box--success {
@extend .message-box;
background-color: $green;
}
.message-box--error {
@extend .message-box;
background-color: $red;
a {
color: $red-dark;
&:hover, &:active, &:focus {
color: $red-extradark;
}
}
}
// AFTER
// %message-default {
// border: 1px solid $grey-dark;
// margin: $margins;
// padding: $padding;
// text-align: center;
// }
// .message-box {
// @extend %message-default;
// @extend %checkmark;
// background-color: $grey-light;
// }
// .message-box--success {
// @extend %message-default;
// @extend %checkmark;
// background-color: $green;
// }
// .message-box--error {
// @extend %message-default;
// background-color: $red;
// a {
// color: $red-dark;
// &:hover, &:active, &:focus {
// color: $red-extradark;
// }
// }
// }
Raw
SassMeister-output.css
.message-box, .message-box--success, .message-box--error {
background-color: #dddddd;
border: 1px solid #444444;
margin: 2em;
padding: 1em;
text-align: center;
}
.message-box--success {
background-color: #aaffaa;
}
.message-box--error {
background-color: #ffaaaa;
}
.message-box--error a {
color: #aa0000;
}
.message-box--error a:hover, .message-box--error a:active, .message-box--error a:focus {
color: #110000;
}
Raw
SassMeister-rendered.html
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></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