Re: [css-variables] Using $foo as the syntax for variables

Personally I find the functional syntax clearer, and more in keeping with
existing CSS syntax.

The non-SASS/LESS preprocessor I use uses functional style:

*/* Defining variables */*
@define {
    helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
    brand-blue: #C1D9F5;
    outer-width: 960px;
}
*/* Applying variables */*
@media only screen and ( max-width: $( outer-width ) ) {
    ul, p {
        font-family: $( helvetica );
        background: $( brand-blue ) url( tile.png ) repeat-x;
    }
}
*/* Variable interpolation */*
.greeting {
    background-image: url(images/bg/tile-$( theme-name ).png)
    content: "Hi $( username )!";
}


I've never heard any complaints about typing some extra parens.

Other benefits of functional over straight dollar syntax:

   - Less likely to clash with future syntax changes
   - Doesn't clash with current parent selector proposal
   - Potential for inline default arguments (or other mechanism)
   - Interpolation
   - Macro style uses



-- 
Pete Boere
Web Developer

Received on Wednesday, 23 May 2012 09:27:33 UTC