Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created January 4, 2012 22:08
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save chriseppstein/1562442 to your computer and use it in GitHub Desktop.
Save chriseppstein/1562442 to your computer and use it in GitHub Desktop.
This gist describes a new feature we're experimenting with for Sass 3.2: placeholder selectors. They do not get generated into your output, but they can be used like a class and extended like one.
$gutter: 10px;
$grid-unit: 60px;
%clearfix {
*zoom: 1;
&:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
}
%column {
@extend %clearfix;
float: left;
margin-right: $gutter;
&.last {
margin-right: 0;
}
}
@for $i from 1 through 9 {
.span-#{$i} {
@extend %column;
width: $grid-unit * $i + $gutter * ($i - 1);
}
}
.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9 { *zoom: 1; }
.span-1:after, .span-2:after, .span-3:after, .span-4:after, .span-5:after, .span-6:after, .span-7:after, .span-8:after, .span-9:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9 { float: left; margin-right: 10px; }
.last.span-1, .last.span-2, .last.span-3, .last.span-4, .last.span-5, .last.span-6, .last.span-7, .last.span-8, .last.span-9 { margin-right: 0; }
.span-1 { width: 60px; }
.span-2 { width: 130px; }
.span-3 { width: 200px; }
.span-4 { width: 270px; }
.span-5 { width: 340px; }
.span-6 { width: 410px; }
.span-7 { width: 480px; }
.span-8 { width: 550px; }
.span-9 { width: 620px; }
@chriseppstein
Copy link
Author

@jlong, yes, that is what I mean. And it's one of the reasons we didn't end up merging that changeset. A named group of rules is a mixin. but at the point that it's in the document it needs to have a selector to be addressable by extend.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment