LearnBoost/stylus — Issue #534: Feature idea/request: @override or @reset
Author: mekwall
Created: 2012-01-20 13:20:33+00:00
State: open

It would be awesome if we could have the ability to properly override/reset already defined rules. You might say that this is already possible by just setting a new value, which is all true but far from optimal.

// this is located in foo.styl
.foo
color: #bbb;
font-size: 14px;
font-family: Verdana;

// now we're in a new file, and import the rules from foo.styl
@import foo

// we don't want .foo to change font-size or font-family, but set the color to #ccc
.foo
color: #ccc;
font-size: inherit;
font-family: inherit;

The above will generate bad and bloated code that doesn't make sense to send to the client.

I wish we could have something like this instead:

// this is located in foo.styl
.foo
color #bbb
font-size 14px
font-family Verdana

// now we're in a new file, and import the rules from foo.styl
@import foo

// we don't want .foo to change font-size or font-family, but set the color to #ccc
.foo
@override // or @reset
color #ccc

The `@override` or `@reset` will remove all rules before it that match the selector. We will now have a proper way to override/reset previously defined rules which in turn generates optimal code that makes sense. I.e. this will be handy when working with CSS frameworks that provide default values in rules that you wish to change. Instead of having to change the actual source, you would merely have to use the function in your own code which keeps it clean and simple.

Perhaps we could take it even further by passing an argument that tells the function which values to override.

.foo
@override color,font-family
color #ccc
font-family Arial

The above would remove any `color` and `font-family` values that were defined before it that matches that selector.

I welcome any feedback and critique!