🎨 Responsive Scale Mixins

A powerful SCSS mixin system for creating perfectly responsive designs that maintain Figma proportions across all screen sizes.

⚠️ Breaking Changes in v2.0.0

Pure CSS implementations are affected by this breaking change.

CSS Variables: Variable names changed from --computed-scale-factor-px/--computed-scale-factor-rem to generic --computed-scale-factor
Calc Expressions: Units are now appended to multipliers (e.g., * 2rem instead of * 2)
SCSS Usage: Unchanged - existing SCSS mixin calls continue to work

SCSS implementations are NOT affected - existing @include responsive-scale() calls work unchanged.

Migration Guide (Pure CSS Users)

Update your CSS variable definitions:

/* OLD (v1.x) */
:root {
  --computed-scale-factor-px: calc(100vw / 1440);
  --computed-scale-factor-rem: calc(100vw / 1440 / 16);
  --computed-tablet-scale-factor-px: calc(100vw / 768);
  --computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
  --computed-mobile-scale-factor-px: calc(100vw / 375);
  --computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

/* NEW (v2.0) */
:root {
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

Update your calc expressions to include units:

/* OLD (v1.x) */
font-size: calc(var(--computed-scale-factor-px) * 40);

/* NEW (v2.0) */
font-size: calc(var(--computed-scale-factor) * 40px);

✨ Features

Figma Proportions: Maintains exact proportions from your Figma designs
Automatic Scaling: No manual breakpoint calculations needed
Tablet Interpolation: Smart interpolation between mobile and desktop values
CSS Custom Properties: Uses modern CSS variables for optimal performance
Framework Agnostic: Works with any CSS framework or vanilla CSS
TypeScript Ready: Compatible with CSS Modules and CSS-in-JS solutions
Universal Unit Support: Handles all CSS units including absolute (px, pt, cm, mm, in, pc) and relative (%, em, rem, vw, vh, vmin, vmax) units

🚀 Quick Start

Installation

npm

npm install responsive-scale-mixins

Yarn

yarn add responsive-scale-mixins

pnpm

pnpm add responsive-scale-mixins

Framework-Specific Setup

Next.js (App Router)

// app/globals.css or app/styles/globals.scss
@import "~responsive-scale-mixins";

:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  // Define CSS variables globally (required)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

// Import in app/layout.tsx: import './globals.css'

Next.js (Pages Router)

// styles/globals.scss
@import "~responsive-scale-mixins";

:root {
  // Define CSS variables globally (required)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

// Import in pages/_app.js: import '../styles/globals.scss'

Next.js Setup:

App Router: Put :root in app/globals.css (imported in layout.tsx)
Pages Router: Put :root in styles/globals.scss (imported in pages/_app.js)
The :root selector defines global CSS custom properties accessible everywhere

Create React App

// src/index.scss or src/styles/main.scss
@import "~responsive-scale-mixins";

:root {
  // Define CSS variables globally (required)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

// Import in src/index.js: import './index.scss'

Create React App Setup:

Put :root in your main SCSS file (e.g., src/index.scss)
Import the SCSS file in src/index.js
The :root selector makes CSS variables available app-wide

Vue.js

// src/assets/styles/main.scss
@import "~responsive-scale-mixins";

:root {
  // Define CSS variables globally (required)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

// Import in src/main.js: import './assets/styles/main.scss'

Vue.js Setup:

Put :root in your global SCSS file
Import in src/main.js or use in a global style resource
The :root selector defines app-wide CSS variables

Angular

// src/styles.scss (global styles)
@import "~responsive-scale-mixins";

:root {
  // Define CSS variables globally (required)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

// This file is automatically included by Angular CLI

Angular Setup:

Put :root in src/styles.scss (automatically included by Angular CLI)
No manual import needed - Angular handles it
The :root selector defines global CSS variables

Vite + Vue/React

// src/styles/main.scss
@import "responsive-scale-mixins";

:root {
  // Customize for your design system (optional)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

Gatsby

// src/styles/global.scss
@import "~responsive-scale-mixins";

:root {
  // Customize for your design system (optional)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

Nuxt.js

// assets/styles/main.scss
@import "~responsive-scale-mixins";

:root {
  // Customize for your design system (optional)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

SvelteKit

// src/app.scss
@import "responsive-scale-mixins";

:root {
  // Customize for your design system (optional)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

Astro

// src/styles/global.scss
@import "responsive-scale-mixins";

:root {
  // Customize for your design system (optional)

  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

CSS Modules

// styles.module.scss
@import "~responsive-scale-mixins";

// Variables must be in global scope
// In your main CSS file:
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1920);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 390);
  --tablet-proportion-scale-factor: calc((100vw - 390px) / (1920px - 390px));
}

// Then in your module
.myClass {
  @include responsive-scale(font-size, 24, 16);
}

Tailwind CSS Integration

// styles/main.scss
@import "~responsive-scale-mixins";

:root {
  @include responsive-scale-variables();
}

// Use alongside Tailwind
.custom-element {
  @include responsive-scale(padding, 20 40, 10 20);
  @apply bg-blue-500 text-white; // Tailwind classes still work
}

Styled Components

// If using styled-components with SCSS preprocessing
import styled from 'styled-components';
import './styles/responsive-mixins.scss'; // Import in your main file

const StyledComponent = styled.div`
  ${props => props.theme.responsiveScale('font-size', 24, 16)}
`;

Basic Usage

// In your main SCSS file
@import "~responsive-scale-mixins";

// Include variables in your root element (required)
:root {
  @include responsive-scale-variables();
}

// Use the mixin anywhere
.my-element {
  @include responsive-scale(font-size, 24, 16);
  @include responsive-scale(padding, 20 40, 10 20);
}

📖 API Reference

`responsive-scale-variables($desktop-width, $tablet-width, $mobile-width)`

Defines the CSS custom properties for scaling calculations.

Parameters:

$desktop-width: Design width for desktop (default: 1920px)
$tablet-width: Design width for tablet (default: 768px)
$mobile-width: Design width for mobile (default: 390px)

`responsive-scale($property, $desktop-value, $mobile-value, $unit, $is-percentage, $desktop-relative, $mobile-relative, $important)`

The main responsive scaling mixin.

Parameters:

$property: CSS property name (e.g., font-size, padding)
$desktop-value: Value for desktop screens
$mobile-value: Value for mobile screens
$unit: Unit for scaling (px or rem, default: px)
$is-percentage: Whether the value is a percentage (default: false)
$desktop-relative: Base value for percentage calculations on desktop
$mobile-relative: Base value for percentage calculations on mobile
$important: String to append (e.g., " !important" for override, default: null)

🎯 Examples

Typography

.hero-title {
  @include responsive-scale(font-size, 48, 32);
  @include responsive-scale(line-height, 1.2, 1.3);
  @include responsive-scale(letter-spacing, -1, -0.5);
}

Spacing

.card {
  @include responsive-scale(padding, 32 48, 16 24);
  @include responsive-scale(margin-bottom, 24, 16);
}

Dimensions

.button {
  @include responsive-scale(width, 200, 150);
  @include responsive-scale(height, 56, 44);
  @include responsive-scale(border-radius, 8, 6);
}

Percentage-based Properties

.text {
  // Letter-spacing as 1% of font-size
  @include responsive-scale(letter-spacing, 1, 1, px, true, 48, 32);
}

Override Specificity

.override-bootstrap {
  @include responsive-scale(
    font-size,
    24,
    16,
    px,
    false,
    null,
    null,
    " !important"
  );
  @include responsive-scale(
    padding,
    16 32,
    8 16,
    px,
    false,
    null,
    null,
    " !important"
  );
}

🔧 Configuration

Custom Design Widths

Easily customize the design widths to match your project's breakpoints:

:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)

  // Custom design widths (desktop, tablet, mobile)
  @include responsive-scale-variables(1440px, 768px, 375px);
  // Or use defaults: @include responsive-scale-variables();
}

Default values:

Desktop: 1920px
Tablet: 768px
Mobile: 390px

REM and EM Units

.element {
  @include responsive-scale(
    font-size,
    3,
    2,
    rem
  ); // 3rem / 2rem - uses rem scale factor
  @include responsive-scale(
    font-size,
    2,
    1.5,
    em
  ); // 2em / 1.5em - uses rem scale factor
}

Universal Unit Support:

The mixin supports all CSS units with a single generic scale factor:

Absolute Units:

@include responsive-scale(property, value, mobile-value, px) → * valuepx
@include responsive-scale(property, value, mobile-value, pt) → * valuept
@include responsive-scale(property, value, mobile-value, cm) → * valuecm
@include responsive-scale(property, value, mobile-value, mm) → * valuemm
@include responsive-scale(property, value, mobile-value, in) → * valuein
@include responsive-scale(property, value, mobile-value, pc) → * valuepc

Relative Units:

@include responsive-scale(property, value, mobile-value, em) → * valueem
@include responsive-scale(property, value, mobile-value, rem) → * valuerem
@include responsive-scale(property, value, mobile-value, %) → * value%
@include responsive-scale(property, value, mobile-value, vw) → * valuevw
@include responsive-scale(property, value, mobile-value, vh) → * valuevh
@include responsive-scale(property, value, mobile-value, vmin) → * valuevmin
@include responsive-scale(property, value, mobile-value, vmax) → * valuevmax

Example Usage:

.element {
  @include responsive-scale(margin, 2, 1, cm); // centimeters
  @include responsive-scale(width, 50, 30, vw); // viewport width
  @include responsive-scale(height, 80, 60, vh); // viewport height
  @include responsive-scale(font-size, 1.5, 1, em); // em units
}

Manual CSS Variables (Alternative)

If you prefer manual control, you can set the CSS variables directly:

:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440); // Your desktop width
  --computed-tablet-scale-factor: calc(100vw / 768); // Your tablet width
  --computed-mobile-scale-factor: calc(100vw / 375); // Your mobile width
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

🔧 Troubleshooting

If the @include responsive-scale-variables() mixin doesn't work in your setup (e.g., due to SCSS compilation issues), use the manual CSS variables approach. Below are manual setups for each framework:

Why the Manual Approach Works

The @include responsive-scale-variables() mixin may fail in certain SCSS compilation environments (like some Next.js setups) because the imported mixins aren't processed correctly. The manual CSS variables approach bypasses this by directly defining the required --computed-scale-factor-* variables in :root.

Next.js (App Router) - Manual Setup

// app/globals.css or app/styles/globals.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440); // Your design desktop width
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In component files
@import "responsive-scale-mixins";
.my-element {
  @include responsive-scale(font-size, 24, 16);
}

Next.js (Pages Router) - Manual Setup

// styles/globals.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In component files
@import "responsive-scale-mixins";

Create React App - Manual Setup

// src/index.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In component files
@import "responsive-scale-mixins";

Vue.js - Manual Setup

// src/assets/styles/main.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In component styles
@import "responsive-scale-mixins";

Angular - Manual Setup

// src/styles.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In component styles
@import "responsive-scale-mixins";

Vite + Vue/React - Manual Setup

// src/styles/main.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In components
@import "responsive-scale-mixins";

Gatsby - Manual Setup

// src/styles/global.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In components
@import "responsive-scale-mixins";

Nuxt.js - Manual Setup

// assets/styles/main.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In components
@import "responsive-scale-mixins";

SvelteKit - Manual Setup

// src/app.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In components
@import "responsive-scale-mixins";

Astro - Manual Setup

// src/styles/global.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In components
@import "responsive-scale-mixins";

CSS Modules - Manual Setup

// In your global CSS file (e.g., globals.scss)
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1920);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 390);
  --tablet-proportion-scale-factor: calc((100vw - 390px) / (1920px - 390px));
}

// In your module files
@import "responsive-scale-mixins";
.myClass {
  @include responsive-scale(font-size, 24, 16);
}

Tailwind CSS - Manual Setup

// styles/main.scss
:root {
  // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In components
@import "responsive-scale-mixins";
.custom-element {
  @include responsive-scale(padding, 20 40, 10 20);
  @apply bg-blue-500 text-white;
}

Styled Components - Manual Setup

// In your global styles
:root {
   // Replace 1440 with your design width or leave default (desktop)
  // Replace 768 with your design width or leave default (tablet)
  // Replace 375 with your design width or leave default (mobile)
  --computed-scale-factor: calc(100vw / 1440);
  --computed-tablet-scale-factor: calc(100vw / 768);
  --computed-mobile-scale-factor: calc(100vw / 375);
  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
}

// In styled components with SCSS preprocessing
import styled from 'styled-components';
import './styles/responsive-mixins.scss';

const StyledComponent = styled.div`
  ${props => props.theme.responsiveScale('font-size', 24, 16)}
`;

Note: Replace 1440, 768, 375 with your actual design widths. The manual approach ensures compatibility across all build tools and frameworks.

📱 Breakpoints

Desktop: ≥992px (scales from desktop design width)
Tablet: 768px - 991px (interpolated values)
Mobile: ≤767px (scales from mobile design width)

🛠 Development

Building

npm install
# No build step required - pure SCSS

Testing

npm test

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Inspired by Figma's responsive design principles
Built for modern web development workflows
Compatible with CSS Modules, Styled Components, and traditional CSS

🧪 Testing

The library includes a comprehensive test suite located in the test/ directory:

# Run the test suite
cd test && ./test.sh  # Unix/Linux/macOS
cd test && test.bat   # Windows

See test/TEST_README.md for detailed testing instructions.

�📞 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
📖 Docs: Full Documentation
📦 NPM: https://www.npmjs.com/package/responsive-scale-mixins
👤 NPM Profile: https://www.npmjs.com/~sidodus

Made with ❤️ by Saheed Odulaja

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
.github		.github
scss		scss
test		test
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
index.scss		index.scss
package.json		package.json

License

Sidodus/responsive-scale-mixins

Folders and files

Latest commit

History

Repository files navigation