Skip to content

Instantly share code, notes, and snippets.

@finteractive

finteractive/SassMeister-input-HTML.html

Created August 25, 2015 01:41
Show Gist options
  • Save finteractive/a1e1d132c8f4b4d2c946 to your computer and use it in GitHub Desktop.
Save finteractive/a1e1d132c8f4b4d2c946 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<body>
<div class="message--status">Hey Something happened</div>
<div class="message--warning">Warning You should double check this!</div>
<div class="message--error">Doh! Something is bad here</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.3)
// ----
//////////////////////////////
// Message Component Variable Defaults used in mixins
//////////////////////////////
$message-padding: 1em !default;
$message-width: 80% !default;
$message-color-status: grey !default;
$message-color-warning: orange !default;
$message-color-error: red !default;
//////////////////////////////
// Mixin Defines the components unique to each variation
//////////////////////////////
// Most messages have common layouts
@mixin message-layout($width:$message-width, $padding:$message-padding){
padding: $padding;
width: $width;
}
// All messages have unique colors
@mixin message-color($color) {
border-color: $color;
background: mix(white, $color, 20%);
color: mix(black, $color, 50%);
}
//////////////////////////////
// Core placeholder component holds all common attributes
//////////////////////////////
%message__core{
box-sizing: border-box;
margin: 0 auto 2em 0;
border-style: solid;
border-width: 2px;
}
%message__layout{
@include message-layout;
}
//////////////////////////////
// Define Components
//////////////////////////////
.message--status {
@extend %message__core;
@extend %message__layout;
@include message-color($message-color-status);
}
.message--warning {
@extend %message__core;
@extend %message__layout;
@include message-color($message-color-warning);
}
.message--error {
@extend %message__core;
@include message-layout($padding: 4em);
@include message-color($message-color-error);
}
Raw
SassMeister-output.css
.message--status, .message--warning, .message--error {
box-sizing: border-box;
margin: 0 auto 2em 0;
border-style: solid;
border-width: 2px;
}
.message--status, .message--warning {
padding: 1em;
width: 80%;
}
.message--status {
border-color: gray;
background: #999999;
color: #404040;
}
.message--warning {
border-color: orange;
background: #ffb733;
color: #7f5200;
}
.message--error {
padding: 4em;
width: 80%;
border-color: red;
background: #ff3333;
color: #7f0000;
}
Raw
SassMeister-rendered.html
<html>
<body>
<div class="message--status">Hey Something happened</div>
<div class="message--warning">Warning You should double check this!</div>
<div class="message--error">Doh! Something is bad here</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment