Unable to build theme: "Error: Expected number, variable, function, or calculation. log('Invalid unit `#{$unit}`.');"

Issue

When building a theme there are 'Expected number, variable, function, or calculation $_: log('Invalid unit `#{$unit}`.');' errors:

Message:
build/_css/clay/functions/_type-conversion-functions.scss
Error: Expected number, variable, function, or calculation.
╷
40 │ $_: log('Invalid unit `#{$unit}`.');
│ ^
╵
build/_css/clay/functions/_type-conversion-functions.scss 40:11 @import
build/_css/clay/functions/_global-functions.scss 9:9 @import
build/_css/clay/base.scss 5:9 @import
build/_css/clay.scss 1:9 root stylesheet
Details:
formatted: Error: Expected number, variable, function, or calculation.

Environment

Liferay DXP 7.3+, when building themes with blade templates.

Resolution

This error is due to using sass version 1.65.1.
It is fixed in "liferay-theme-tasks" v11.5.3.

You just need to rebuild dependencies in the theme to fix the issue:

# NPM
npm install && npm run build

# Or alternatively
yarn && yarn build

If you still have problems, you can manually change theme's package.json. Update "liferay-theme-tasks" to at least version 11.5.3:

...
"devDependencies": {
   "compass-mixins": "0.12.10",
   "gulp": "4.0.2",
   "liferay-frontend-css-common": "6.0.8",
   "liferay-frontend-theme-styled": "6.0.54",
   "liferay-frontend-theme-unstyled": "6.0.45",
   "liferay-theme-tasks": "^11.5.3",
   "liferay-font-awesome": "3.5.2"
},
...

Additional Information