This is building off what I posted here: https://groups.google.com/d/topic/haml/2McvrcWhUjo/discussion
Basically I'm using a lot of compass mixins like `box-shadow`. Now, let's say I want to repeatedly use: @include box-shadow(0 0 0 0.15); That will generate this in many places in my stylesheet: -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); I end up having like 20 * those 4 lines: #my-div { -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } #my-div2 { -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } And so on... that's a whole lot of bloat in the rendered css! Of course, it's a whole lot more efficient to do: .box-shadow-0-0-0-015 { @include box-shadow(0 0 0 0.15); } And then wherever I need that box shadow: #my-div { @extend .box-shadow-0-0-0-015; } That ends up producing nicer css: .box-shadow-0-0-0-015, #my-div, ... 20 other selectors { -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } *However*, this approach is much harder to maintain. I need to keep track of all of my own classes manually. I end up having a ton of generic classes like: .box-shadow-0-0-0-015 { @include box-shadow(0 0 0 0.15); } .box-shadow-0-0-0-025 { @include box-shadow(0 0 0 0.25); } .box-shadow-0-0-0-035 { @include box-shadow(0 0 0 0.35); } And it means that my code is not very reusable. What I was hoping to achieve was the best of both worlds. I want to have a mixin that automatically generates a "top-level" class on the fly. This way I could do: #my-div { @include my-super-box-shadow("bs1", 0 0 0 0.15); } #my-div2 { @include my-super-box-shadow("bs1", 0 0 0 0.15); } #my-div3 { @include my-super-box-shadow("bs2", 0 0 0 0.35); } And it would produce: .bs1, #my-div, #my-div2 { -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .bs2, #my-div3 { @include my-super-box-shadow(0 0 0 0.35); } This would be a beautiful combination of efficient CSS output with highly-maintainable scss code. Any thoughts? On Wed, May 4, 2011 at 3:47 PM, Nathan Weizenbaum <nex...@gmail.com> wrote: > No, it's not. Why wouldn't you just define the top-level selector outside > the mixin? > > On Wed, May 4, 2011 at 11:41 AM, Aaron Gibralter < > aaron.gibral...@gmail.com> wrote: > >> Does anyone know if it would be possible to write a sass function that >> could define a top-level selector within another selector: e.g.: >> >> >> @mixin br1 { >> @top-level .br-1 { >> @include border-radius(1px); >> } >> @extend .br-1; >> } >> >> .foo { >> font-size: 10px; >> @include br1; >> } >> >> //=> >> >> .foo { >> font-size: 10px; >> } >> >> .br-1, .foo { >> border-radius: 1px; >> } >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Haml" group. >> To post to this group, send email to haml@googlegroups.com. >> To unsubscribe from this group, send email to >> haml+unsubscr...@googlegroups.com. >> For more options, visit this group at >> http://groups.google.com/group/haml?hl=en. >> > > -- > You received this message because you are subscribed to the Google Groups > "Haml" group. > To post to this group, send email to haml@googlegroups.com. > To unsubscribe from this group, send email to > haml+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/haml?hl=en. > -- You received this message because you are subscribed to the Google Groups "Haml" group. To post to this group, send email to haml@googlegroups.com. To unsubscribe from this group, send email to haml+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/haml?hl=en.