Skip to content

Instantly share code, notes, and snippets.

@chao-xian
Created September 1, 2014 10:50
Show Gist options
  • Save chao-xian/ba55c4400383533e9d50 to your computer and use it in GitHub Desktop.
Save chao-xian/ba55c4400383533e9d50 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// Go Crazy! Mixins, Nesting, Variables, Ampersands
$line-height: 1.4;
$v-align: middle;
@mixin box-shape($size) {
-webkit-box-sizing: $size;
-moz-box-sizing: $size;
box-sizing: $size;
}
@mixin shape($height: null, $width: null) {
height: $height;
width: $width;
}
@mixin font-size($font-size, $line-height: $line-height) {
font-size: $font-size;
line-height: $line-height;
}
@mixin h-align {
display: block;
margin-left: auto;
margin-right: auto;
}
*,
*:before,
*:after {
@include box-shape(border-box);
}
.module {
background-color: #CCFF99;
@include h-align;
@include box-shape(8px);
padding: 1em 5%;
@include shape(300px, 100%);
}
.no-js .module{
border: 3px solid white;
@include shape(294px, 394px);
}
.module h3 {
background: #FFFFFF;
@include box-shape(4px);
@include font-size(2.4em);
vertical-align: middle;
@include shape(100%);
}
.btn {
background-color: #FFFFFF;
color: #CCFF99;
@include h-align;
@include font-size(1.2em, 1.4);
vertical-align: $v-align;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.module {
background-color: #CCFF99;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-box-sizing: 8px;
-moz-box-sizing: 8px;
box-sizing: 8px;
padding: 1em 5%;
height: 300px;
width: 100%;
}
.no-js .module {
border: 3px solid white;
height: 294px;
width: 394px;
}
.module h3 {
background: #FFFFFF;
-webkit-box-sizing: 4px;
-moz-box-sizing: 4px;
box-sizing: 4px;
font-size: 2.4em;
line-height: 1.4;
vertical-align: middle;
height: 100%;
}
.btn {
background-color: #FFFFFF;
color: #CCFF99;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 1.2em;
line-height: 1.4;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment