Re: css block re-use proposal

Hello,

I thought about exactly the same this week - I thought of it as "aspects" or "themes" - grouping a style by its style.

SASS (see HAML+SASS) along as other server side solutions mostly try to mimic:
a.) Aspects
b.) Cascading selector blocks like
c.) Variables
d.) Basic Math Operations (done via css3 calc())
Now the question is which of these features should be supported client side e.g. by CSS itself. I am not up to date on the discussion which is a good thing to support and what not, and why that is the case.

Aspects (or "themes" or "modules" or "mix-ins")? can reduce css code size and at the same time help with maintainability.
You would add an aspect for things that have a box-shadow, or things that have a certain text color, or things that have a certain font-family.


Example on a.):

This is what I cam up with, unsure if its any good this way though:

div$box-shadowed,
section$box-shadowed {
    box-shadow: 10px 5px 5px black;
}
nav#menu, section.main, a {
    /* nav#menu and section.main would have the aspect $box-shadowed, a wouldn't */
    use-aspect: box-shadowed;
}



Example on b.):

#somethings {
    color: red;
  
    .a_thing {
        color: blue;
    } 
}
/* Which would be "rendered" to something like this: */
#somethings {
    color: red;
}
#somethings .a_thing {
    color: blue;
}


Regards
 Jonas

On 2010-10-26, at 00:20, Eric Twilegar wrote:

> Many times in CSS I find myself copying and pasting the exact block of CSS statements from block to block.
>  
> It would be nice if in CSS you could reference one block of CSS inside of another block.
>  
> I would suggest that we could create a block with a name perhaps using the $ character to start it. Then refer to it in another block like an include so that the CSS lines are copied in.
>  
>  
> $bottomLessBorderStyleGroup
> {
>       border-style:solid;
>      
>       border-top-width:1px;
>       border-left-width:1px;
>       border-right-width:1px;
>       border-bottom-width:0px;
> }
>  
> .someRealClassOnADiv
> {
> $bottomLessBorderStyleGroup
> }
>  
>  
> For now I’m implementing something similar by generating the CSS server side, but it would be nice to not have to go to a pre-processor.
>  
>  
> et