Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rem and px have incompatible units in rfs-breakpoint #446

Closed
fogx opened this issue Nov 6, 2022 · 2 comments
Closed

rem and px have incompatible units in rfs-breakpoint #446

fogx opened this issue Nov 6, 2022 · 2 comments
Labels

Comments

@fogx
Copy link

fogx commented Nov 6, 2022

Hey,
i'm trying to configure the RFS values in a scss stylesheet and get the following error: 7065rem and 1440px have incompatible units.

image

I previously used the same settings but in a stylus stylesheet and had no problems.
Is this a bug or a feature? 😁

@import "node_modules/rfs/scss";
$rfs-base-value: 1.5rem;
$rfs-breakpoint: 1440px; // this causes the error
//$rfs-breakpoint: 90rem; // this works
$rfs-two-dimensional: true;
@fogx
Copy link
Author

fogx commented Apr 16, 2023

after testing with a codepen, i've realized that both this and #456 are fixed by reordering the variables & import ->
doesn't work:

@import "node_modules/rfs/scss";
$rfs-base-value: 1.5rem;
$rfs-breakpoint: 1440px;

works:

$rfs-base-value: 1.5rem;
$rfs-breakpoint: 1440px;
@import "node_modules/rfs/scss";

not sure if this is obvious, but it took me quite a long time to realize. Might be worth putting into the readme 😅

@MartijnCuppens
Copy link
Member

You need to define your config before importing the mixin indeed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants