Skip to content

Instantly share code, notes, and snippets.

@finteractive

finteractive/SassMeister-input-HTML.html

Created January 20, 2014 03:36
Show Gist options
  • Save finteractive/8514498 to your computer and use it in GitHub Desktop.
Save finteractive/8514498 to your computer and use it in GitHub Desktop.
Download ZIP
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)
// Breakpoint (v2.4.1)
// Toolkit (v2.0.0.alpha.5)
// ----
// Using @import to load breakpoint gem
// https://github.com/team-sass/breakpoint
@import "toolkit";
@import "breakpoint";
// define breakpoint variables
$bp-med: 400px;
$bp-lrg: 800px;
// Color Variables
$grey-light: #ddd;
$grey-dark: #444;
$grey-extradark: #222; // Add a new color
$red: #ffaaaa;
$red-dark: darken($red, 50);
$red-extradark: darken($red, 80);
$green: #aaffaa;
// Layout Variables
$margins: 2em;
$padding: 1em;
%checkmark {
&:after{
content: "\2713 ";
margin-left: 1em;
}
}
%message-default {
border: 1px solid $grey-dark;
margin: $margins;
padding: $padding;
text-align: center;
@include breakpoint($bp-med){
width: 50%;
float: left;
}
@include breakpoint($bp-lrg){
width: 33%;
}
}
// 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);
}
}
footer {
clear:both;
}
Raw
SassMeister-output.css
.message-box:after, .message-box--success:after {
content: "\2713 ";
margin-left: 1em;
}
.message-box, .message-box--success, .message-box--error {
border: 1px solid #444444;
margin: 2em;
padding: 1em;
text-align: center;
}
@media (min-width: 400px) {
.message-box, .message-box--success, .message-box--error {
width: 50%;
float: left;
}
}
@media (min-width: 800px) {
.message-box, .message-box--success, .message-box--error {
width: 33%;
}
}
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;
}
footer {
clear: both;
}
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