Statiq.Framework

Statiq.Framework copied to clipboard

Trying to port over my current website from a different static generator, I had my CSS source files in SASS (indented format). That produces several errors, such as the one reported in https://github.com/sass/libsass/issues/2638

It seems to be an issue with libsass, which I'm unsure about whether it has been fixed or not. Regardless, the version used of SharpScss seems to be an old one, from 2018, so it might be necessary to update it at some point, hopefully fixing the issue.

If I recall, I tried updating SharpScss at one point and hit some blockers, but maybe there's been a new release since then that'll work. Do you have a small minimal repro SASS file I can use to trigger the errors you were seeing?

Sure, right now to me, creating something like test.sass with the following content

body
    background-color: white

gives error

[ERRO] Assets/Process » ExecuteIf » CacheDocuments » CompileSass » [test.sass => test.sass] Error: Invalid CSS after "": 
expected 1 selector or at-rule, was "body"
    on line 1

I believe the issue here is that libsaas primarily supports SCSS syntax (Sassy CSS) rather than the original, older indented Sass syntax. While the two are similar, the difference is in their use of brackets, semicolons, and colons.

I modified one of the unit tests to take in the content you provided, and it was able to reproduce the error. I updated it to SCSS syntax and it works fine.

I tried with some actual SCSS syntax that didn't mimic the CSS output and it was also able to compile it fine as well.

$primary-color: #3498db;

@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

.container {
  background: $primary-color;
  padding: 20px;

  .button {
    background: darken($primary-color, 10%);
    @include box-shadow(0px, 0px, 10px, rgba(0, 0, 0, 0.5));
    &:hover {
      background: lighten($primary-color, 10%);
    }
  }
}

.container { background: #3498db; padding: 20px; }

.container .button { background: #217dbb; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }

.container .button:hover { background: #5faee3; }

Maybe we can add some documentation explaining that it only supports SCSS syntax or something for future users.

Nice detective work @rclanan - definitely adding some hints about this behavior and (un)supported syntax styles to the docs. I think there's a dedicated page for the Sass module (and if there isn't, there should be) so I'll take a look at adding a little bit there.