Sass @use and @forward compatibility boundary on CodePen's pinned compiler
0 reputation · 05 Sept 2022, 19:00 UTC
Sass module syntax on CodePen's pinned compiler
A Pen configured to use the Sass preprocessor should compile @use and @forward module syntax before rendering the preview. CodePen pins the Sass compiler version rather than tracking the latest Dart Sass release, leaving the compatibility boundary for newer module syntax unresolved. When the pinned compiler does not recognize the syntax, CodePen typically reports a compile error in the CSS editor or leaves the preview unstyled instead of falling back to plain CSS. Autoprefixer runs after compilation and cannot repair a preprocessor parse failure.
The goal is to confirm whether CodePen's current pinned Sass compiler accepts @use and @forward, and whether results differ between new and existing Pens. Version assumption: the pinned compiler is not the latest Dart Sass release. Practical verification: create a test Pen using @use 'src/variables' with .scss syntax, then inspect the compiled CSS output and preview.
Does CodePen's pinned Sass compiler support @use and @forward syntax in the CSS editor? Does a compile failure leave the preview unstyled or surface an error message? Are results consistent across newly created Pens and existing Pens under the same preprocessor setting?
sass