- From: François REMY <francois.remy.dev@outlook.com>
- Date: Wed, 8 Apr 2015 22:25:00 +0200
- To: "'Andrea Rendine'" <master.skywalker.88@gmail.com>
- CC: "'Leonardo Lima'" <leonardo403@gmail.com>, "'www-style list'" <www-style@w3.org>
>> Would this proposal solve your needs?
>> http://tabatkins.github.io/specs/css-extend-rule/
>
> Actually this is what I was looking for, and I guess the original proposer can appreciate it too. I only have 2 issues:
> [François's Note: reformatted]:
>
> 1. Extending any selector creates weird specificity battles as in "#ID { ... } .class { @extend #ID; ... }"
> 2. Extended fake-selectors (%mixin) should inherit the specificity of the parent rule, not have their own.
>
> Could this be useful to improve CSS Extend Rule?
Yes, those comments look interesting; I'm sure Tab Atkins will read them and see how the overall design can take this into consideration.
Reading your comments, maybe extending any selector isn't the simplest option the CSSWG could pursue.
>> I'm not sure I fully understood your thought. Do you propose that we allow things like this:
>>
>> html {
>> --quote: {
>> color: blue; font-size: 150%; font-weight: bold;
>> }
>> }
>>
>> html section {
>> --quote: {
>> color: royalblue; font-size: 125%; font-weight: bold;
>> }
>> }
>>
>> blockquote, q, span.inline-quote {
>> @imports --quote;
>> }
>>
>> Or do you suggest something that would just be like you can do in a LESS/SASS preprocessor today?
>
> The same result could be achieved using variables inside placeholder blocks, and then letting them take
> the value specified in the block they're called in. [...] Like this:
>
> [François's Note: I rewrote the example to match the previous one]:
>
> %quote {
> color: var(--quote-color, inherit);
> font-size: var(--quote-font-size, 100%);
> font-weight: var(--quote-font-weight, inherit);
> }
>
> html {
> --quote-color: blue;
> --quote-font-size: 150%;
> --quote-font-weight: bold;
> }
>
> html section {
> --quote-color: royalblue;
> --quote-font-size: 125%;
> --quote-font-weight: bold;
> }
>
> blockquote, q, span.inline-quote {
> @extend %quote; /* this will use the right variables as css variables inherit */
> }
Yes, this is globally equivalent to what I wrote.
This may stop to work if you don't want to set the exact same set of properties all the time, though. Whether we want to support this is debatable, I agree.
Received on Wednesday, 8 April 2015 20:25:27 UTC