Calculate using Math operations on LESS

Asked

Viewed 39 times

1

I’m trying to add one number with a string and LESS is not interpreting as I wanted, see the example:

@screen-sm: 768;
@screen-md: 1024;

.col-tablet(@rules) {
  @media (min-width: @screen-sm+'px') and (max-width: @screen-md+-1+'px') {
        @rules();
    }
}

.col-tablet({
  display: block;
});

and the exit:

@media (min-width: 768 'px') and (max-width: 1024+-1 'px') {
  display: block;
}
less

1 answer

1


The problem is that in Less you don’t have to add number with string

Do the following, change your variables to:

@screen-sm: 768px;
@screen-md: 1024px;

I believe you are making a subtraction when you perform:

@screen-md+-1

So change to:

.col-tablet(@rules) {
  @media (min-width: @screen-sm) and (max-width: (@screen-md - 1)) {
        @rules();
    }
}

For more information and examples how to use, access the Less Pilot http://winless.org/online-less-compiler

Browser other questions tagged less

You are not signed in. Login or sign up in order to post.