@if Rule Units

  • Affected Version
    WoltLab Suite 5.3

    The @if rule in SCSS cannot accept <, <=, >, and >= if the value has percent unit.


    These declarations are accepted:

    == with % unit:

    Sass (Scss)
    .myClass {
    margin: 0 auto;
    @if ($wcfLayoutMaxWidth == 90%) {
    padding: 50px;
    }
    }

    <, <=, >, and >= with px unit:

    Sass (Scss)
    .myClass {
    margin: 0 auto;
    @if ($wcfLayoutMaxWidth >= 1800px) {
    padding: 50px;
    }
    }


    However, the code below will result to an error:

    The SCSS code contains an error: Could not compile SCSS: Incompatible units % and px.: line: 201, column: 2.


    <, <=, >, and >= with % unit:

    Sass (Scss)
    .myClass {
    margin: 0 auto;
    @if ($wcfLayoutMaxWidth >= 90%) {
    padding: 50px;
    }
    }
  • Hello,


    the Sass spec does not permit the greather/less than operator for incompatible units: https://sass-lang.com/documentation/operators/relational


    Which somewhat makes sense, because the compiler cannot figure out how it should compare a pixel value to a percentage value. I'll see if I can find a workaround for what you're trying to do here, it's a bit unfortunate that the same variable can hold arbitrary values.


    Edit: Is that something new in your style or do you already used it in earlier versions (3.1 / 5.2)?

    Alexander Ebert
    Senior Developer WoltLab® GmbH