CODEWITHSUNDEEP
csslessgulp
Jeremy Harris
Jeremy Harris

Reputation: 24579

LESS addition operator (+) is appending instead of adding

I'm having a strange issue I haven't seen occur. I am trying to do some basic addition to some variables like this:

@screen-break-sm:       768px;
@screen-break-md:       992px;

@screen-max-mobile:     @screen-break-sm;
@screen-min-desktop:    @screen-break-sm + 1;

Then, those values are being used in some media queries. When it is compiled using gulp-less (version ~3.0.0 in package.json) via Gulp, the output ends up being something like:

@media (min-width:768px + 1) {
   // CSS
}

I'm expecting:

@media (min-width:769px) {
   // CSS
}

I have tried doing the addition as both @screen-break-sm + 1 and also screen-break-sm + 1px. I've also tried removing the px part of the original values and doing the add and appending the px afterwards, but that doesn't add either.

In case it is relevant, this is one of the gulp scripts that builds a section where I first ran into this issue:

module.exports = function (build) {
    return function () {

        var pagesPath = build.options.styles.buildPath + '/pages/';

        return build.gulp.src('./resources/assets/less/pages/**/*')
            .pipe(build.plugins.less({
                paths: [ build.plugins.path.join(__dirname, 'less', 'vendor', 'theme', 'bootstrap') ]
            })).on('error', build.errorHandler)
            .pipe(build.plugins.minifyCss()).on('error', build.errorHandler)
            .pipe(build.plugins.extReplace('.min.css')).on('error', build.errorHandler)
            .pipe(build.gulp.dest(pagesPath));
    };
};

Any ideas why LESS is concatenating/appending instead of performing addition?

[EDIT]

While the solution is the same as the other question that was identified as a possible duplicate, that question does not discuss the problem that users will encounter directly, and therefore I think this question is much better suited for searching purposes. I never found that solution after an hour of Googling and only after getting the answer and the "strict math" verbiage did that other question show up.

Upvotes: 1

Views: 165

Answers (1)

Luca Detomi
Luca Detomi

Reputation: 5716

Look at strict math option which default value is OFF. Are you sure that for some reason you don't have it set to ON?

lessc -sm=on
lessc --strict-math=on

Upvotes: 1

Related Questions