Skip to content

4.x - Importing modular scale using ratio string results in an error #176

@joyheron

Description

@joyheron

I'm testing out the new modular scale implementation in my project, and I've been pretty successful in migrating my code frommodularscale-sass in version 3.x to the new 4.x branch, but I currently have an issue with loading the ratio.

I've tried out both methods for importing and overriding the settings:

METHOD 1:

@use "modularscale-sass/stylesheets/modularscale" as ms with ($settings: (base: 1rem, ratio: 'minor-second'));

or

METHOD 2:

@use "modularscale-sass/stylesheets/modularscale" as ms;
$base-font-size: 1rem; // 16px
ms.$settings: (base: $base-font-size, ratio: 'minor-second');

This appears to me to be the desired syntax based on this documentation: https://github.com/modularscale/modularscale-sass/tree/4.x#ratios

However, when I try to compile my sass code, I get the following error:

aborting: Error: $number: "minor-second" is not a number.
   ╷
21 │   @if unit($ratio) != "" {
   │       ^^^^^^^^^^^^
   ╵

This error occured using the v4.0.0.rc2 version.

I've also tried it based on the v4.x-iteration branch, and there I get the following error when importing using METHOD 1:

aborting: Error: $base: radio-target("minor-second", 1rem) is not a number.
   ╷
94 │     @return math.pow($ratio, $v) * $base;
   │             ^^^^^^^^^^^^^^^^^^^^
   ╵

Using the number value of the ratio (1.067) works, but I would prefer to specify the name of the ratio if possible.

Note: on the 4.x-iteration branch the import using METHOD 2 doesn't appear to compile at all. I get the following error:

aborting: Error: Undefined variable.
  ╷
2 │   $settings: (),
  │   ^^^^^^^^^
  ╵

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions