Skip to content

feat: add SCSS variables and mixins to reduce repetitive CSS #1270

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.

Sign up for GitHub

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

Merged
SAPTARSHI-coder merged 3 commits into from
Jun 4, 2026
+83 −0
Merged

feat: add SCSS variables and mixins to reduce repetitive CSS #1270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f83613e
feat: add vendor prefixes for cross-browser animation compatibility (…
S0412-2007 Jun 4, 2026
68e9292
feat: add SCSS variables and mixins to reduce repetitive CSS (fixes #…
S0412-2007 Jun 4, 2026
c914ca7
fix: remove vendor-prefixed keyframes
S0412-2007 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@use "variables" as *;

// Standard transition mixin
@mixin ease-transition($property: transform, $speed: $speed-medium, $easing: var(--ease-ease)) {
transition: $property $speed $easing;
}

// Animation mixin
@mixin ease-animation($name, $duration: 1s, $easing: $ease-in-out, $iteration: infinite) {
animation: $name $duration $easing $iteration;
}

// Timing function mixin
@mixin ease-timing($easing: $ease-in-out) {
animation-timing-function: $easing;
}
15 changes: 15 additions & 0 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// ============================================
// EaseMotion-css — SCSS Animation Tokens
// Fixes #1116: DRY refactor of repetitive CSS
// ============================================

// Core easing curves (matching existing CSS vars)
$ease-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
$ease-bounce: cubic-bezier(0.8, 0, 1, 1);
$ease-in-out: cubic-bezier(0, 0, 0.2, 1);
$ease-ping: cubic-bezier(0, 0, 0.2, 1);

// Duration tokens (matching --ease-speed-* vars)
$speed-fast: var(--ease-speed-fast);
$speed-medium: var(--ease-speed-medium);
$speed-slow: var(--ease-speed-slow);
14 changes: 14 additions & 0 deletions submissions/vendor-prefixes/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Vendor Prefixes for Cross-Browser Compatibility

## What it does
Adds -webkit-, -moz-, and -o- vendor prefixes to animation, transform, and transition properties to ensure consistent rendering across all major browsers including older Safari and mobile browsers.

## How to use
Add after easemotion.css:
\\\html
<link rel="stylesheet" href="easemotion.css">
<link rel="stylesheet" href="submissions/vendor-prefixes/style.css">
\\\

## Why it fits EaseMotion CSS
Fixes issue #1117 - ensures EaseMotion animations work correctly on WebKit-based browsers, Safari, and legacy mobile browsers.
21 changes: 21 additions & 0 deletions submissions/vendor-prefixes/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vendor Prefixes Demo</title>
<link rel="stylesheet" href="../../easemotion.css">
<link rel="stylesheet" href="style.css">
<style>
body { font-family: sans-serif; display: flex; gap: 20px; padding: 40px; background: #f5f5f5; }
.box { width: 120px; height: 120px; background: #6c63ff; color: white;
display: flex; align-items: center; justify-content: center;
border-radius: 8px; font-size: 13px; text-align: center; padding: 8px; }
</style>
</head>
<body>
<div class="box ease-fade-in">Fade In</div>
<div class="box ease-slide-up">Slide Up</div>
<div class="box ease-zoom-in">Zoom In</div>
<p style="margin-top:20px">Works on Chrome, Firefox, Safari, and legacy browsers.</p>
</body>
</html>
17 changes: 17 additions & 0 deletions submissions/vendor-prefixes/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/* Vendor Prefixes for Cross-Browser Animation Compatibility (Issue #1117) */

/* Keyframe animations with vendor prefixes */

@keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } }


@keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Vendor-prefixed transform support */
[class*='ease-'] {
animation-fill-mode: both;

backface-visibility: hidden;

transform: translateZ(0);
}
Loading