(A turing complete language library)
Variables
$cf-Orange: #474546; h1 { font-size: 20px; color: $cf-Orange; }
Nesting
header { margin: 20px 0; h1 { color: $cf-Orange; } }
Mixins
@mixin rounded-corners($radius: 8px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
#footer {
border: solid 1px $cf-Orange;
@include rounded-corners(10px);
}
Let's refer transformers code structure
Object-oriented CSS is awesome
<a href="#" class="btn redbg">Twitter</a> <a href="#" class="btn bluebg">Facebook</a>
<a href="#" class="redbtn">Twitter</a> <a href="#" class="bluebtn">Facebook</a>
<a href="#" class="redbtn">Twitter</a> <a href="#" class="bluebtn">Facebook</a>
@mixin btn { border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; }
.redbtn { @include btnbase; background:red; } .bluebtn { @include btnbase; background:blue; }
Let's keep it DRY
<a href="#" class="redbtn">Twitter</a> <a href="#" class="bluebtn">Facebook</a>
.btn { border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; }
.redbtn { @extend .btn; background:red; } .bluebtn { @extend .btn; background:blue; }
Even more DRY !
%clearfix {
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.container-with-floated-children {
@extend %clearfix;
}