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)
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.