SASS syntax is incorrect

[Riaan-ZA]

The SASS output is working now, however there are some syntax issues,

';' is needed at the end of rules and variable declarations
The mixin need to be inclosed by { }

ie it needs to look like this

$top: 0 0 80px 80px;
$top_hover: 0 -80px 80px 80px;
$twitter: 0 -160px 19px 15px;
$up_arrow: 0 -175px 30px 30px;
$youtube: 0 -205px 19px 18px;
@mixin sprite($sprite) {
    background-image: url('img/frontend/sprite.png');
    background-position: nth($sprite, 1) nth($sprite, 2);
    width: nth($sprite, 3);
    height: nth($sprite, 4);
}

[Riaan-ZA]

Heres the updated code for sass.tpl that outputs the correct syntax:

<% layout.images.forEach(function (image) { %>$<%= image.className %>: <%= getCSSValue(-image.x) %> <%= getCSSValue(-image.y) %> <%= getCSSValue(image.width) %> <%= getCSSValue(image.height) %>;
<% }); %>@mixin <%= spriteName %>($sprite) {
    background-image: url('<%= options.spritePath %>')<% if (options.pixelRatio !== 1) { %>;
    background-size: <%= getCSSValue(layout.width) %> <%= getCSSValue(layout.height) %><% } %>;
    background-position: nth($sprite, 1) nth($sprite, 2);
    width: nth($sprite, 3);
    height: nth($sprite, 4);
}

[selaux]

Hmm, sass itself has two syntaxes the older sass syntax, which is what I am using and the newer scss syntax, which I guess you are using. Isn't it possible to import a sass-file from a scss-file or something like that (I really don't know, I never use sass)? I don't want to support two syntaxes for a single compiler 😉.

[Riaan-ZA]

I didn't realise it was the old syntax you were using, according so SASS docs its possible to import .sass files within a .scss file so it should work, provided you specify the right extension for your output css file.

I managed to resolve my issue with the code above, so I guess its up to you which syntax you want to support. There are arguments in favour of both, so I guess it comes down to personal preference. Maybe just indicate which syntax you will be using in the documentation.

Anyway, thanks for the clarification.