| 1 | @import 'restyle';
|
| 2 |
|
| 3 | @mixin extend {
|
| 4 | @include restyle(extend-me);
|
| 5 |
|
| 6 | &.modified {
|
| 7 | @include restyle(modified extend-me);
|
| 8 | }
|
| 9 | }
|
| 10 |
|
| 11 | @include restyle-define(extend-me, (
|
| 12 | color: green,
|
| 13 | position: relative,
|
| 14 |
|
| 15 | // modifiers...
|
| 16 | '@restyle.modifiers': (
|
| 17 | modified: (
|
| 18 | color: red
|
| 19 | )
|
| 20 | ),
|
| 21 |
|
| 22 | // states...
|
| 23 | '@restyle.states': (
|
| 24 | hover: (
|
| 25 | color: blue
|
| 26 | )
|
| 27 | )
|
| 28 | ));
|
| 29 |
|
| 30 | .before-extend {
|
| 31 | @include extend;
|
| 32 | }
|
| 33 |
|
| 34 | @include restyle-extend(extend-me, (
|
| 35 | color: black,
|
| 36 |
|
| 37 | // modifiers...
|
| 38 | '@restyle.modifiers': (
|
| 39 | modified: (
|
| 40 | position: absolute
|
| 41 | )
|
| 42 | ),
|
| 43 |
|
| 44 | '@restyle.states': (
|
| 45 | focus: (
|
| 46 | color: purple
|
| 47 | )
|
| 48 | )
|
| 49 | ));
|
| 50 |
|
| 51 | .after-extend {
|
| 52 | @include extend;
|
| 53 | }
|