foundation-sites: SCSS error in Foundation file when building my SASS

Context

I’m creating a theme for a Drupal website with Foundation as dependency. The theme uses SCSS that is built used gulp-sass. In the lasts theme commits (2-3 weeks ago), everything was working just fine. I just came back to this project and now, when I do a “npm start” in my project, I have an error telling me that there is an issue with a Foundation file.

What should happen?

When I do “npm start” to build my SCSS, the SCSS files should be built. …

What happens instead?

The SCSS files aren’t being built. Instead, I’m getting this terminal output:

└─$ npm start         

> foundation-sites-template@1.0.0 start /home/xxx/xxx/xxx/xxx/mint-intranet-theme/src
> gulp

[15:19:36] Using gulpfile ~/xxx/xxx/xxx/mint-intranet-theme/src/gulpfile.js
[15:19:36] Starting 'default'...
[15:19:36] Starting 'sass'...
Error in plugin "sass"
Message:
    node_modules/foundation-sites/scss/util/_math.scss
Error: Invalid CSS after "    @return math": expected expression (e.g. 1px, bold), was ".abs($a);"
        on line 23 of node_modules/foundation-sites/scss/util/_math.scss
        from line 5 of node_modules/foundation-sites/scss/util/_util.scss
        from line 66 of scss/_settings.scss
        from line 3 of scss/app.scss
>>     @return math.abs($a);

   ----------------^

[15:19:36] Finished 'sass' after 117 ms
[15:19:36] Starting 'serve'...

My files:

1. package.json

{
  "name": "foundation-sites-template",
  "version": "1.0.0",
  "description": "Basic template for a new Foundation for Sites project.",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp sass"
  },
  "author": "Foundation Yetinauts <contact@get.foundation> (https://get.foundation)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/foundation/foundation-sites/issues",
    "email": "contact@get.foundation"
  },
  "dependencies": {
    "foundation-sites": "latest",
    "jquery": ">=3.6.0",
    "motion-ui": "latest",
    "what-input": ">=5.2.10"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.4",
    "browser-sync": "^2.18.13",
    "gulp": "^4.0.0",
    "gulp-load-plugins": "^2.0.7",
    "gulp-postcss": "^9.0.1",
    "gulp-sass": "^4.1.1",
    "postcss": "^8.3.11"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/foundation/foundation-sites-template.git"
  },
  "private": true,
  "browserslist": [
    "last 2 versions"
  ]
}

2. gulpfile.js

var gulp          = require('gulp');
var $             = require('gulp-load-plugins')();
var autoprefixer  = require('autoprefixer');

var sassPaths = [
  'node_modules/foundation-sites/scss',
  'node_modules/motion-ui/src'
];

function sass() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'compressed' // if css compressed **file size**
    })
      .on('error', $.sass.logError))
    .pipe($.postcss([
      autoprefixer()
    ]))
    .pipe(gulp.dest('../assets/css'));
};

function serve() {
  gulp.watch("scss/**/*.scss", sass);
}

gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));

Faulty code snippet in Foundation src

// Foundation for Sites
// https://get.foundation
// Licensed under MIT Open Source

@use "sass:math";

////
/// @group functions
////

/// Finds the greatest common divisor of two integers.
///
/// @param {Number} $a - First number to compare.
/// @param {Number} $b - Second number to compare.
///
/// @returns {Number} The greatest common divisor.
@function gcd($a, $b) {
  // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
  @if ($b != 0) {
    @return gcd($b, $a % $b);
  }
  @else {
    @return math.abs($a);
  }
}

My environment

  • Foundation version(s) used: Latest
  • Device, Operating System and version: Last version of Kali Linux
  • Node version: 14.21.3

Checklist

  • I have read and follow the CONTRIBUTING.md document.
  • There are no other issues similar to this one.
  • The issue title and template are correctly filled.

Thank you all in advance for your help. If needed, I can add code or information to this issue.

About this issue

  • Original URL
  • State: closed
  • Created 10 months ago
  • Reactions: 4
  • Comments: 15 (4 by maintainers)

Most upvoted comments

I resolved the issue with downgrade foundation sites to 6.6.3v

I have the same error. My environment on Windows: Foundation Sites 6.8.1 (latest), Node 18.16.1 (LTS), Node-Sass 8.0.0 (latest compatible with Node 18), Gulp-Sass 5.1.0 (latest). I see in your latest commits dropping node-sass support (I expected this only in Foundation 7), though switching to dart-sass causes compatibility issues in projects with large legacy code base.