Skip to content

Instantly share code, notes, and snippets.

@finteractive

finteractive/SassMeister-input-HTML.html

Created April 30, 2014 17:17
Show Gist options
  • Save finteractive/11433017 to your computer and use it in GitHub Desktop.
Save finteractive/11433017 to your computer and use it in GitHub Desktop.
Download ZIP
Message Box: Demos Compass, Mixins, Variables, 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.6)
// Compass (v)
// ----
@import "compass";
// Creating custom mixins with @mixin
// Using @include for custom & compass mixins
// Color Variables
$grey-light: #ddd;
$grey-dark: #444;
$grey-extradark: #222;
$red: #ffaaaa;
$red-dark: darken($red, 50);
$red-extradark: darken($red, 80);
$green: #aaffaa;
// Layout Variables
$margins: 2em;
$padding: 1em;
// Place Holders (Don't actually output css on their own)
%checkmark {
&:after{
content: "\2713 ";
margin-left: 1em;
}
}
%message-default {
// Adding a compass mixin
@include border-radius(10px);
border: 1px solid $grey-dark;
margin: $margins;
padding: $padding;
text-align: center;
}
// Custom mixin takes 2 variables and provides defaults
@mixin link($link-color:$grey-dark, $hover-color:$grey-extradark ){
color: $link-color;
&:hover, &:active, &:focus {
color: $hover-color;
}
}
a {
@include link;
}
.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 {
@include link($red-dark, $red-extradark);
}
}
Raw
SassMeister-output.css
.message-box:after, .message-box--success:after {
content: "\2713 ";
margin-left: 1em;
}
.message-box, .message-box--success, .message-box--error {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #444444;
margin: 2em;
padding: 1em;
text-align: center;
}
a {
color: #444444;
}
a:hover, a:active, a:focus {
color: #222222;
}
.message-box {
background-color: #dddddd;
}
.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