Re: Extending Class Proposal

On Thu, Jan 31, 2013 at 11:36 AM, Philip Walton <philip@philipwalton.com> wrote:
>> That has nothing to do with SASS's syntax, and everything to do with
>> the fact that SASS is a preprocessor, not a part of the browser.
>>
>> In SASS's @extend existed in the browser, it would apply to all
>> selector matching, including that done via JS.
>
> Yes, obviously, so let me rephrase: assuming Sass syntax were currently
> implemented by the browser, how would you target all instances of a base
> class with JavaScript?
>
> The only way I could see with the current syntax would be
> document.querySelectorAll(".button"), which would match all elements with
> the button class as well as all elements that match any extending selector.

Yes, exactly.  If you have "foo bar { @extend button }", it means "any
time you see 'button' show up in a selector, pretend that it's 'foo
bar' instead".

> But this seems like a really bad solution because there are certainly
> situations where you'd want to *just* match the base class. It would also be
> inconsistent with CSS selectors which currently don't match extended
> classes.
>
> If I'm misrepresenting your idea, please clarify how you'd expect JavaScript
> to target all instances of a base class.

This appears to apply equally well to CSS selectors.  What if you just
want to put styles on *only* the base class, not the things that are
extending you?

SASS's answer is (1) you usually don't, and (2) when you do, you can
switch to using a placeholder selector instead, which is similar to
your proposal.  Placeholders let you generate "fake" classes solely
for use as a "base class" when using @extend.

~TJ

Received on Thursday, 31 January 2013 20:15:13 UTC