im-richard / Scaffold

Extend, combine and compress CSS
http://github.com/IAMRichardT/Scaffold/wiki
161 stars 19 forks source link

A "MultipleRule" extension #7

Open jide opened 14 years ago

jide commented 14 years ago

I came accross a case where I needed to have a property in 2 different mixins, but wanted them to be combined when applied to a rule. E.g. :

=mixin1 {
  filter: opacity(alpha=50);
}

=mixin2 {
  filter: progid:DXImageTransform.Microsoft.DropShadow(color=#000000, OffX='1', OffY='1');
}

.selector {
  +mixin1;
  +mixin2;
}

Would give :

.selector {
  filter: opacity(alpha=50) progid:DXImageTransform.Microsoft.DropShadow(color=#000000, OffX='1', OffY='1');
}

This is useful for MSIE filters but also for some CSS3 stuff like multiple backgrounds, transitions etc.

jide commented 14 years ago

Some ideas for the syntax :

=mixin1 {
  filter: +opacity(alpha=50);
}

=mixin1 {
  filter: add(opacity(alpha=50));
}

=mixin1 {
  +filter: opacity(alpha=50);
}