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