0

I'm trying to build a project where I get an error in the build:

Error: Undefined operation "10 % !important".
   ╷
82 │         width: #{($i * 10)}% !important;
   │                ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

This is where I have the error:

enter image description here

And this is the error I'm getting:

enter image description here

I'm not familiar with SASS so I don't know what is wrong with the code above.

How can I solve this ?

Edit:

This is how I build sass files:

import dartCompiler from 'dart-sass';
import sass from "gulp-sass";
sass.compiler = dartCompiler;
    ...
gulp.task("sass", () => {
  return (
    gulp.src([
        src_sass_folder + "*.scss",
        src_sass_folder + "**/*.scss"
      ], {
        since: gulp.lastRun("sass"),
      })
      .pipe(dependents())
      .pipe(filter(['**'].concat(partials)))
      .pipe(debug({title: "sass-debug:", showCount: false}))
      .pipe(sourcemaps.init())
      .pipe(plumber({errorHandler: reportError}))
      .pipe(sass({ fiber: Fiber }))
      .pipe(autoprefixer())
      .pipe(minifyCss({debug: true}, (details) => {
        console.log(`Original size: ${details.stats.originalSize}, Minified size: ${details.stats.minifiedSize}, Efficiency: ${details.stats.efficiency}`);
      }))
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest(dist_folder + "Content"))
      .pipe(browserSync.stream({match: '**/*.css'}))
  );
});

And after removing the !important I still get the build error:

Error: Expected expression.
   ╷
82 │         width: #{($i * 10)}%;
   │                             ^
   ╵

This is only resolved when I remove the %.

I should also mention that this issue is only reproducible when using dart-sass as a compiler instead of the deprecated node-sass compiler according to this:

https://github.com/sass/node-sass/issues/2952

Edit2:

I think I resolved the caused issue by changing the line width: #{($i * 10)}% !important; to width: #{($i * 10)'%'} !important;, but I'm still having issue in the generated css, it looks like this:

.u-width-60pc__xs{
    width:60 %!important;
}

Notice the space between 60 and %

Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191
  • There is nothing wrong with this code, can you show us a bit more? – Arkellys Feb 22 '21 at 21:48
  • @Arkellys could you check please my post edit. – Renaud is Not Bill Gates Feb 22 '21 at 22:37
  • I will check but that would be better if you could post the code and not images :) – Arkellys Feb 23 '21 at 06:42
  • I still doesn't have any problem to compile your code on SassMeister. What version of Sass are you using? Out of curiosity, what happen if you remove the `!important`? – Arkellys Feb 23 '21 at 06:47
  • Does this answer your question? [Does SASS support adding !important to all properties in a mixin?](https://stackoverflow.com/questions/20288793/does-sass-support-adding-important-to-all-properties-in-a-mixin) – Roy Feb 23 '21 at 10:06
  • @Arkellys I have provided my build task, and removing the `!important` doesn't resolve the issue, the problem comes from using `%` for some reason, and I'm using dart-sass for sass compilation. – Renaud is Not Bill Gates Feb 23 '21 at 10:18
  • @Roy I'm afraid it doesn't since the issue is not with using `!important`, could you please check my post edit ? – Renaud is Not Bill Gates Feb 23 '21 at 10:18

1 Answers1

0

Could you try changing it to width: #{($i * 10)+'% '} !important; and see if it works?

Abhinav
  • 16