body
font-size 16px
.header
height 40px
#nav
padding-bottom 10px
To yield:
body {
font-size: 16px;
}
body .header {
height: 40px;
}
body .header #nav {
padding-bottom: 10px;
}
headHeight = 20%
$headWidth = 1000px
body
height 100% - headHeight
header
width $headWidth*1.08
body {
height: 80%;
}
body header { width: 1080px; }
vendors = webkit moz o ms official
border-radius()
for vendor in vendors
if vendor == official
border-radius arguments
else
-{vendor}-border-radius arguments
#content
border-radius (5px)
To yield:
#content {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
clearfix(el, other)
{el}::after
overflow hidden
other(1px,solid,lighten(red, 60%))
border(args...)
border-bottom args
clearfix('.content', border)
.content::after {
overflow: hidden;
border-bottom: 1px solid #f99;
}
red(#c00)
// => 204
light(#eee)
// => true
lightness(#e70)
// => 46.66666666666%
width = 960px 1080px 1280px
push(width, 1440px, 1920px)
// width => 960px 1080px 1280px 1440px 1920px
unit(15%, 'px')
// => 15px
base-convert(1811208624,36)
// => tychio
@import "reset.css"
@import "reset"
@import reset