Re: CSS Classes Custom - by Leonardo Lima

> On Apr 9, 2015, at 6:51 AM, Andrea Rendine <master.skywalker.88@gmail.com> wrote:
> 
> Leonardo,
> > :root{
> >    %border{border-radius:10px;}
> > }
> the original syntax proposed in "CSS Extend Rule" does not take into accout nesting rulesets.
> That is, no {property} inside a {} block. Otherwise you'd end up looking for where the placeholder has been defined and if it fits into cascading/inheritance dynamics.
> Instead, it would be better to simply define placeholders in "CSS global scope" (the term is not precise but I hope it is comprehensible), so that it is available in every rule block without having the need to nest it inside :root (or anything else)
> If you have 
> :root {
>   %border{ /* properties */}
> }
> you can also have
> main {
>   %border{ /* other properties */}
> }

I think I missed something. Where is this nesting syntax coming from, and why would you need %border nested in :root?

Anyway, I'm taking this to be equivalent to this: 

:root %border{ /* properties */}

main %border{ /* other properties */}

> But then consider
> main div {
>   @extend %border;
> }

So, this would mean the same two rules would be applied to DIVs inside of "main", as though they had a matching 'border' class. 

> What %border block is to be considered?

Both. Those DIVs are descendants of both :root and main. Just imagine the DIVs had a class=border on them, and that the '%' was actually a '.'. Properties in the second rule could overwrite values of the same properties in the first for those DIVs, because 'main .border' is more specific than ':root .border'. 

At least, that's my understanding. 

> 
> IMHO it's better to just have global custom classes to be called where necessary.
> %border {
>   /* properties */
> }
>