test/_responsive.scss


1
2
3
4
5
6
7
8
9
10
11
12
13

@use 'true' as *;
@use '../src/functions';
@use '../src/responsive';

@include describe('responsive') {
    @include it('fluid-calc') {
        $rem600px: functions.px-to-rem(600px);
        $rem800px: functions.px-to-rem(800px);

        @include assert-equal('#{responsive.fluid-calc(2rem, 4rem, 600px, 800px)}', 'calc(2rem + 2 * (100vw - #{$rem600px}) / #{functions.strip-unit($rem800px - $rem600px)})', 'Responsive value from 2rem to 4rem over 600px to 800px');
        @include assert-equal('#{responsive.fluid-calc(4px, 12px, 600px, 800px)}',  'calc(4px + 8 * (100vw - 600px) / 200)',  'Responsive value from 4px to 12px over 600px to 800px');
    }
}