Skip to content

Instantly share code, notes, and snippets.

@chao-xian
Created September 1, 2014 10:02
Show Gist options
  • Save chao-xian/b648fb97cbf043ba68a8 to your computer and use it in GitHub Desktop.
Save chao-xian/b648fb97cbf043ba68a8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// make a mixin for the border radius and anything else you can see that might be needed.
@mixin box-sizing($box: border-box) {
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
}
@mixin shape($height: null, $width: null) {
height: $height;
width: $width;
}
*,
*:before,
*:after {
@include box-sizing;
}
.module {
background-color: #CCFF99;
display: block;
@include box-sizing(8px);
@include shape(300px, 400px);
margin-left: auto;
margin-right: auto;
padding: 1em 5%;
}
.module h3 {
background: #FFFFFF;
@include box-sizing(4px);
font-size: 2.4em;
line-height: 1.4;
vertical-align: middle;
@include shape(null, 100%); // won't output height
}
.btn {
background-color: #FFFFFF;
color: #CCFF99;
display: block;
font-size: 1.2em;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.module {
background-color: #CCFF99;
display: block;
-webkit-box-sizing: 8px;
-moz-box-sizing: 8px;
box-sizing: 8px;
height: 300px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 1em 5%;
}
.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;
width: 100%;
}
.btn {
background-color: #FFFFFF;
color: #CCFF99;
display: block;
font-size: 1.2em;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment