skip to Main Content

I’m looking to set some variables in bulma. Using dart sass (1.45.1 compiled with dart2js 2.15.1) results in an ‘Undefined operation’ error

Error: Undefined operation "min(1216px, 100vw) - 64px".
   ╷
20 │       max-width: min($widescreen, $container-max-width) - $container-offset

The bulma source is included in the primary sass file

@use 'menu-large'
@use 'hero'


@import "../../../../libraries/node_modules/bulma/bulma.sass"

Why the error on ‘min’?

2

Answers


  1. Chosen as BEST ANSWER

    Set to px units rather than using vw:

    $container-max-width: 1400px
    

    Altering the bulma framework is not desirable. MIN() MAX() Wrapping the value doesn't work "#{1200px}".


  2. The min() function returns a px value, your value is incompatible with subtraction. You cannot subtract other units than px.

    You can convert the value of $container-offset to px before:

    $offset-in-px: $container-offset / ($widescreen / 100);
    max-width: min($widescreen, $container-max-width) - $offset-in-px * 1px;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search