Skip to content

Instantly share code, notes, and snippets.

@leekiernan
Created March 20, 2013 22:59
Show Gist options
  • Save leekiernan/5209324 to your computer and use it in GitHub Desktop.
Save leekiernan/5209324 to your computer and use it in GitHub Desktop.
Using OOCSS with SCSS. OOSCSS if you will!
%line { overflow:hidden; *overflow:visible; *zoom:1; }
%unit { float:left; }
%size1of1 { float:none; }
%size1of2 { width:50%; }
%size1of3 { width:33.33333%; }
%size2of3 { width:66.66666%; }
%size1of4 { width:25%; }
%size3of4 { width:75%; }
%size1of5 { width:20%; }
%size2of5 { width:40%; }
%size3of5 { width:60%; }
%size4of5 { width:80%; }
%lastUnit { float:none;width:auto; _position:relative; _left:-3px; _margin-right:-3px; }
@mixin line { @extend %line; }
@mixin unit($size, $width, $last:false) {
@extend %unit, %size#{$size}of#{$width};
@if $last == true {
@extend %lastUnit;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment