Replace slash division with math.div()

[jgerigmeyer]

https://sass-lang.com/documentation/breaking-changes/slash-div

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
106 │   '_fifth': (3 / 2),
    │              ^^^^^
    ╵
    node_modules/accoutrement/sass/core/_ratios.scss 106:14  @import
    node_modules/accoutrement/sass/_core.scss 52:9           @import
    node_modules/accoutrement/sass/_tools.scss 4:9           @use

[jgerigmeyer]

@mirisuzanne Is this something you're able to look at? Or @stacyk or @dvdherron?

[mirisuzanne]

We should be able to run a migrator to handle most of it. I don't see the division migrator it documented there, but I think it's just called division. @dvdherron is this something you'd want to look at? (might also be needed on some of our other tools like cascading-colors)

[dvdherron]

Yes, I can give this a look @mirisuzanne. Should be able to fit this in this week.

[dvdherron]

Replace slash division with math.div()

[dvdherron]

@mirisuzanne @jgerigmeyer

Ran the migration to replace slash division with the math.div function.

Bumped sass to 1.33 to get the function to work.

Still need to go through some of the test errors. I think some of the functions will need to be reworked to get math.div to work properly, e.g:

╷
57 │       $result: append($result, nth($list, $i));
   │                                ^^^^^^^^^^^^^^

   ╵
    sass/core/_lists.scss 57:32                          -a-remove-nth()

Error: Invalid CSS after "...ist, ceil((math": expected expression (e.g. 1px, bold), was ".div(length($list),"

Which I think means it's not processing this line correctly in _lists.scss:

$seed: nth($list, ceil(math.div(length($list), 2)));

[mirisuzanne]

Fixed in 2651ab3