scss parser issue, cannot parse variable declaration contains (

com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file
Encountered “(”.

$breakpoints: (
‘palm’ ‘(max-width: 480px)’,
‘lap’ ‘(min-width: 481px) and (max-width: 1023px)’,
‘portable’ ‘(max-width: 1023px)’,
‘desk’ ‘(min-width: 1024px)’
)!default;

the complete scss is in this link https://github.com/csswizardry/csswizardry-grids/blob/master/csswizardry-grids.scss

I don’t really use scss but shouldn’t it be $breakpoints: { instead of ( ?

The “(” marks the start of Sass List. Lists are just a series of other values, separated by either spaces or commas.

When lists are turned into plain CSS, Sass doesn’t add any parentheses, since CSS doesn’t understand them. That means that (1px 2px) (5px 6px) and 1px 2px 5px 6px will look the same when they become CSS. However, they aren’t the same when they’re Sass: the first is a list containing two lists, while the second is a list containing four numbers.

Please
create a ticket
about this with sample SCSS and the CSS that should be produced. The support for lists is still somewhat limited and perhaps this is such a case.