<link href='https://fonts.googleapis.com/css?family=Raleway:300,400,700' rel='stylesheet' type='text/css'>
<body>
<section>
<h1>Smarter Swatches with Sass</h1>
<div class="swatch--red"></div>
<div class="swatch--coral"></div>
<div class="swatch--green"></div>
<div class="swatch--yellow"></div>
<div class="swatch--purple"></div>
<div class="swatch--blue"></div>
<div class="swatch--cyan"></div>
<div class="swatch--gray"></div>
</section>
</body>@import "compass/css3";
@import "susy";
// Susy Settings
$susy: (
flow: ltr, // ltr | rtl
output: float, // float | isolate
math: fluid, // fluid | static (requires column-width)
column-width: false, // false | value
container: 100%, // length or % | auto
container-position: center, // left | center | right | <length> [*2] (grid padding)
last-flow: to,
columns: 4,
gutters: 1/4,
gutter-position: inside, // before | after | split | inside | inside-static (requires column-width)
global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
debug: (
image: show,
color: rgba(#66f, .25),
output: overlay, // background | overlay
toggle: top right,
),
use-custom: (
background-image: true, // look for background-image mixin
background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
box-sizing: true, // look for custom bix sizing mixin
clearfix: false, // true = look for internal clearfix before using micro clearfix
rem: true, // look for rem mixin
)
);
// BEM selectors mixin
@mixin e($element) {
&__#{$element} {
@content;
}
}
@mixin m($modifier) {
&--#{$modifier} {
@content;
}
}
// Clearfix
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
/*********COLOR PLAYGROUND*********/
// Call the color palette modifiers in color values
@function theme($color) {
@return map-get($theme-colors, $color);
}
// Generate background modifier color classes
@mixin bg-color($theme-color) {
@each $theme-color, $color in $theme-colors {
&--#{$theme-color} {
background: $color;
&:after {
content: "#{$theme-color}";
position: relative;
text-align: center;
top: 40%;
color: white;
}
&:hover:after {
content: "#{$color}";
}
}
}
}
//bootstrap-styled breakpoints
@mixin breakpoint($class) {
@if $class == sm {
@media (min-width: 767px) { @content; }
} @else if $class == md {
@media (min-width: 768px) { @content; }
} @else if $class == lg {
@media (min-width: 992px) { @content; }
} @else {
@warn "Breakpoint mixin supports: sm, md, lg";
}
}
$theme-colors: (
red: #CA1327,
coral: #FF3F4B,
yellow: #E9D500,
green: #13CA3B,
cyan: #0CB6F1,
blue: #0888F0,
purple: #6357D0,
gray: #333A40,
);
$colors-per-row-sm: 2;
$colors-per-row-lg: 4;
body {
@include container(4);
background: lighten((theme(gray)), 50);
//8 column grid -md
@include breakpoint(md) {
@include container(8);
}
//12 column grid - lg
@include breakpoint(lg) {
@include container(12);
}
}
section {
margin: 3rem 0;
}
.swatch {
@include bg-color($theme-colors);
}
[class^="swatch--"] {
float: left;
height: 12em;
width: span(1 of $colors-per-row-sm);
text-align: center;
@include breakpoint(md){
width: span(1 of $colors-per-row-lg);
}
}
h1 {
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 3.3rem;
font-weight: 300;
text-align: center;
margin: 1em;
}//Nope
External CSS
This Pen doesn't use any external CSS resources.