W3C home > Mailing lists > Public > www-style@w3.org > May 2012

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

From: Pete Boere <pete@the-echoplex.net>
Date: Wed, 23 May 2012 10:27:08 +0100
Message-ID: <CAKZZz6c9C50N_NqLWiytxdyGwtqjf7-uZD4jH7zLkRJYe1xMZg@mail.gmail.com>
To: www-style@w3.org
Cc: Sylvain Galineau <sylvaing@microsoft.com>, mtanalin@yandex.ru, jackalmage@gmail.com, Sebastian Zartner <sebastianzartner@gmx.de>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:54 GMT