Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created May 20, 2010 07:47
Show Gist options
  • Save chriseppstein/407318 to your computer and use it in GitHub Desktop.
Save chriseppstein/407318 to your computer and use it in GitHub Desktop.
body.standard #footer,
body.standard #header,
body.standard #sidebar,
body.standard #content,
body.standard #ads {
float: left;
margin-left: 10px;
margin-right: 10px;
}
body.standard #footer,
body.standard #header,
body.standard #sidebar {
margin-left: 0;
}
body.standard #footer,
body.standard #header,
body.standard #ads {
margin-right: 0;
}
body.standard #footer,
body.standard #header {
width: 960px;
}
body.standard #sidebar {
width: 190px
}
body.standard #content {
width: 470px
}
body.standard #ads {
width: 270px
}
$gutter-width: 10px
$column-width: 40px
=column-base
float: left
margin:
left: $gutter-width
right: $gutter-width
=last-column
margin-right: 0
=first-column
margin-right: 0
=column($columns, $first: false, $last: false)
@extend column-base
@if $first
@extend first-column
@if $last
@extend last-column
width: $column-width * $columns - $gutter-width
=three-column-layout($left-cols, $middle-cols, $right-cols)
=full-width
+column($left-cols + $middle-cols + $right-cols, $first: true, $last: true)
=header
@extend full-width
=footer
@extend full-width
=left-column
+column($left-cols, $first: true)
=middle-column
+column($middle-cols)
=right-column
+column($right-cols, $last: true)
@yield
body.standard
+three-column-layout(5,12,7)
#footer
+footer
#header
+header
#sidebar
+left-column
#content
+middle-column
#ads
+right-column
@hagenburger
Copy link

I like it. The only thing I don’t like about extending mixins is the name “mixin”. Maybe “block” would be better. For the yield thing I prefer @content.

Maybe we could auto-@yield if there’s no @yield but a closure.

I think this could be possible (even this example won’t make useful code):

=columns($count)
  @for $i from 1 through $count
    .column-#{$i}
      width: $i * 10
      @yield

.table
  +columns(7)
    height: 10px

What about scopes?

=color-steps($color-start, $color-end, $steps)
  @for $step from 1 through $steps
    $color = mix-colors($color-end, $color-start, 100% / $step * $steps)
    @yield
    // or: @yield $step, $color

+color-steps(red, green, 10)
  .column-#{$step}
    background: lighten($color, 50%)
    border: 1px $color solid

@chriseppstein
Copy link
Author

Some interesting ideas and observations there, @hagenburger. Yes, if you called @yield (or whatever it is called) more than once you'd end up placing the contents more than once -- and while I can't think of a good use for that at this instant, I'm sure I will ;)

I'm not sure about auto-yielding -- at first I really liked it, but it would preclude the ability to create a mixin that performs conditional inclusion.

The idea of letting the mixin pass variables to the child block, is interesting too -- I think I prefer the explicit approach.

It had occurred to me that using mixins as a scoping/iteration mechanism like you suggest is a very interesting way of creating localized behaviors within a stylesheet. I've wanted such a capability for compass on many occasions.

@chriseppstein
Copy link
Author

Nathan and I discussed this last night... I don't think we'll see these features anytime soon.

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