Die Leistung (und Spaß) von Rahmen mit CSS Custom Properties

0
300

Du bist wahrscheinlich schon zumindest ein wenig vertraut mit CSS-Variablen. Wenn nicht, hier ist eine zwei-Sekunden-überblick: Sie sind wirklich aufgerufen, benutzerdefinierte Eigenschaften, setzen Sie Sie in der Erklärung Blöcke wie-size: 1em und verwenden Sie Sie als Werte wie schriftart,-Größe: var(–size); Sie unterscheiden sich von Präprozessor-Variablen (z.B. cascade), und hier ist eine Anleitung, mit viel mehr Informationen.

Aber sind wir mit Ihnen, um Ihr volles Potenzial? Wir fallen in alte Gewohnheiten und bieten einen Blick auf Möglichkeiten, bei denen die Variablen können erheblich reduzieren die Menge an code, die wir schreiben?

Dieser Artikel wurde angeregt durch einen kürzlichen tweet, den ich gemacht habe, über die Verwendung von CSS-Variablen zum erstellen von dynamischen animation Verhalten.

CSS-Variablen sind genial, oder? Aber Umfang macht, wird oft übersehen. Zum Beispiel, nehmen Sie diese demo, 3 verschiedene Animationen aber nur 1 animation definiert 💪 das bedeutet, Dass dynamische Animationen 😎 https://t.co/VN02NlC4G8 via @CodePen #CSS #animation #webdev #webdesign #coding pic..com/ig8baxr7F3

— Jhey @ NodeConfEU 2019 📍🇮🇪⌨️ (@jh3yy) 5. November, 2019

Schauen wir uns ein paar Fälle, in denen die CSS-Variablen können verwendet werden, um einige ziemlich Coole Dinge, die wir vielleicht nicht beachtet haben.

Basic scoping gewinnt

Die einfachste und wahrscheinlich häufigste Beispiel wäre Gültigkeitsbereich Farben. Und was ist unsere Lieblings-Komponente für die Verwendung mit Farbe? Die-Taste. 😅

Betrachten Sie die standard-Setups des primären und sekundären Tasten. Beginnen wir mit einigen grundlegenden markup verwendet, die eine BEM-syntax.

<button class=”button button–primary”>Primär</button>
<button class=”button button–secondary”>Zweiter</button>

Traditionell, könnten wir so etwas tun, diese zu gestalten bis:

.button {
Polsterung: 1rem 1.25 rem;
color: #fff;
font-weight: bold;
font-size: 1.25 rem;
margin -: 4px;
transition: background 0,1 s Leichtigkeit;
}

.button–primary {
hintergrund: hsl(233, 100%, 50%);
outline-color: hsl(233, 100%, 80%);
}

.button–primary:hover {
hintergrund: hsl(233, 100%, 40%);
}

.button–primary:active {
hintergrund: hsl(233, 100%, 30%);
}

.button–sekundäre {
hintergrund: hsl(200, 100%, 50%);
outline-color: hsl(200, 100%, 80%);
}

.button–Sekundär:hover {
hintergrund: hsl(200, 100%, 40%);
}

.button–Sekundär:active {
hintergrund: hsl(200, 100%, 30%);
}

Siehe Stift
Basic-Tasten durch Jhey (@jh3y)
auf CodePen.

Das ist eine Menge code für etwas, das nicht besonders Komplex ist. Wir haben nicht Hinzugefügt, viele Stile und wir haben Hinzugefügt eine Menge von Regeln, zugeschnitten auf die Schaltfläche verschiedene Zustände und Farben. Wir konnten deutlich reduzieren Sie den code mit einem Gültigkeitsbereich von Variablen.

In unserem Beispiel ist das nur der unterschiedliche Wert zwischen den zwei-Knopf-Variante ist der Farbton. Let ‘ s umgestalten, dass der code ein wenig dann. Wir ändern nicht das markup aber Reinigung die Stile ein wenig, bekommen wir dies:

.button {
Polsterung: 1rem 1.25 rem;
color: #fff;
font-weight: bold;
font-size: 1.25 rem;
margin: 1rem;
transition: background 0,1 s Leichtigkeit;
hintergrund: hsl(var(–Farbton), 100%, 50%);
outline-color: hsl(var(–Farbton), 100%, 80%);

}
.button:hover {
hintergrund: hsl(var(–Farbton), 100%, 40%);
}

.button:active {
hintergrund: hsl(var(–Farbton), 100%, 30%);
}

.button–primary {
–Farbton: 233;
}

.button–sekundäre {
–Farbton: 200;
}

Siehe Stift
Refactoring-Stile mit einem Gültigkeitsbereich von Variablen durch Jhey (@jh3y)
auf CodePen.

Dies reduziert nicht nur den code, sondern macht die Pflege so viel einfacher. Ändern der core-button-Stile, die in einem Ort und es aktualisiert alle Varianten! 🙌

Ich würde wahrscheinlich lassen Sie ihn dort, um es einfacher für die devs wollen, verwenden Sie diese Tasten. Aber, wir konnten weiter. Wir konnten die inline-variable auf das aktuelle element und entfernen Sie die Klasse Erklärungen völlig. 😲

<button class=”button” style=” ” –Farbton: 233;”>Primary</button>
<button class=”button” style=” ” –Farbton: 200;”>Zweiter</button>

Nun, wir brauchen nicht diese. 👍

.button–primary {
–Farbton: 233;
}

.button–sekundäre {
–Farbton: 200;
}

Siehe Stift
Scoping-w/ inline-CSS-Variablen durch Jhey (@jh3y)
auf CodePen.

Inlining die Variablen, die möglicherweise nicht am besten für Ihren nächsten design-system oder die app aber durchaus auch Chancen. Wie, zum Beispiel, wenn wir über eine button-Instanz, wo wir überschreiben musste die Farbe.

– Taste.- Taste.button–primäre(Stil=`–Farbton: 20;`) Überschrieben

Siehe Stift
Überschrieben mit inline-Rahmen, Jhey (@jh3y)
auf CodePen.

Viel Spaß mit inline-Variablen

Eine andere Möglichkeit ist, ein wenig Spaß mit ihm. Dies ist eine Technik, die ich für viele der Stifte, die ich erstellen über auf CodePen. 😉

Sie kann das schreiben einfach HTML, aber in vielen Fällen werden Sie möglicherweise mit einem Rahmen, wie Reagieren oder einen Präprozessor wie Mops, schreiben Sie das markup. Diese Lösungen ermöglichen Ihnen die Nutzung von JavaScript zu erstellen, die zufällige inline-Variablen. Für die folgenden Beispiele, ich werde mit Mops. Mops ist eine Einbuchtung-basierten HTML-Template-engine. Wenn Sie nicht vertraut mit Mops, fürchtet Euch nicht! Ich werde versuchen zu halten, das markup einfach.

Beginnen wir, indem wir zufällig der Farbton für unser buttons:

– Taste.- Taste(style=`–Farbton: ${Math.random() * 360}`) Erste

Mit Mops, können wir ES6 template-Literale inline-randomisierte CSS-Variablen. 💪

Siehe Stift
Zufällige inline-CSS-variable Farbtöne von Jhey (@jh3y)
auf CodePen.

Animation Veränderungen

So, jetzt haben wir die Möglichkeit zu definieren, random-Eigenschaften für ein element, was sonst könnten wir tun? Nun, eine übersehene Möglichkeit ist die animation. True, können wir nicht animieren, die variable selbst, wie diesem:

@keyframes wachsen {
von { –Maßstab: 1; }
zu { –scale: 2; }
}

Aber wir können erstellen Sie dynamische Animationen basierend auf den Gültigkeitsbereich von Variablen. Wir können ändern Sie das Verhalten der animation on-the-fly! 🤩

Beispiel 1: Das aufgeregt-Taste

Wir erstellen einen button, der schwimmt entlang hüten sein eigenes Geschäft, und dann wird aufgeregt, wenn wir den Mauszeiger über Sie.

Beginnen Sie mit dem markup:

– Taste.- Taste(style=`–Farbton: ${Math.random() * 360}`) Zeigen mir Aufmerksamkeit

Eine einfache schwimmende animation kann wie folgt Aussehen:

@keyframes flow {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -25%);
}
}

Diese geben uns, so etwas wie dieses:

Siehe Stift
Die aufgeregt-Taste Stiftung, die von Jhey (@jh3y)
auf CodePen.

Ich habe ein wenig Schatten wie ein extra, aber es ist nicht lebenswichtig. 👍

Machen wir es so, dass unser Knopf bekommt aufgeregt, wenn wir den Mauszeiger über Sie. Nun, wir könnten Sie einfach ändern Sie die animation wird verwendet, um etwas wie dies:

.button:hover {
animation: shake .1s infinite ease-in-out;
}

@keyframes schütteln {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-1%, 3%) rotate(-2deg);
}
50% {
transform: translate(1%, 2%) drehen(2deg);
}
75% {
transform: translate(1%, -2%) rotate(-1deg);
}
}

Und es funktioniert:

Siehe Stift
Die aufgeregt-Taste wird ein weiterer keyframes definition von Jhey (@jh3y)
auf CodePen.

Aber, wir brauchen, um zu präsentieren, eine weitere keyframes definition. Was wäre, wenn wir die Zusammenführung der beiden Animationen in einem? Sie sind nicht zu weit Weg von einander in Bezug auf die Struktur.

Wir könnten versuchen:

@keyframes-flow-und-shake – {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25%, 75% {
transform: translate(0, -12.5%) rotate(0deg);
}
50% {
transform: translate(0, -25%) rotate(0deg);
}
}

Obwohl dies funktioniert, werden wir am Ende mit einer animation, die ist nicht ganz so glatt, weil die übersetzung die Schritte. Also, was sonst könnten wir tun? Lassen Sie uns einen Kompromiss finden, durch das entfernen der Stufen bei 25% und 75%.

@keyframes-flow-und-shake – {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(0, -25%) rotate(0deg);
}
}

Es funktioniert gut, wie wir erwartet haben, aber hier kommt der trick: wir aktualisieren unseren button mit einigen Variablen.

.button {
–y: -25;
–x: 0;
–rotation: 0;
–Geschwindigkeit: 2;
}

Lassen Sie uns jetzt stecken Sie in der animation-definition, zusammen mit der Schaltfläche die Eigenschaften der animation.

.button {
animation-name: flow-und-schütteln;
animation-Dauer: calc(var(–speed) * 1s);
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes-flow-und-shake – {
0%, 100% {
transform: translate(calc(var (- x) * -1%), calc(var(–y) * -1%))
drehen(calc(var(–rotation) * -1deg));
}
50% {
transform: translate(calc(var (- x) * 1%), calc(var(–y) – * 1%))
drehen(calc(var(–rotation) * 1deg));
}
}

Alles ist gut. 👍

Ändern Sie diese Werte, wenn Sie die Taste schwebte:

.button:hover {
–Geschwindigkeit: .1;
–x: 1;
–y: -1;
–rotation: -1;
}

Siehe Stift
Die aufgeregt-Taste mit umgestaltet werden, keyframes & scoped Variablen durch Jhey (@jh3y)
auf CodePen.

Schön! Jetzt unser Taste hat zwei verschiedene Arten von Animationen, sondern definiert über eine Reihe von keyframes. 🤯

Wir haben ein wenig mehr Spaß mit ihm. Wenn wir es ein wenig weiter, können wir den Knopf ein wenig mehr verspielt und vielleicht aufhören zu animieren, insgesamt, wenn es aktiv ist. 😅

Siehe Stift
Die Aufgeregt-Taste w/ dynamische animation 🤓 von Jhey (@jh3y)
auf CodePen.

Beispiel 2: Blasen

Nun, wir haben durchgemacht, einige verschiedene Techniken für die Dinge, die wir tun können, mit der Kraft der Umfang, sagen wir es alle zusammen. Wir erstellen einen zufällig generierten bubble-Szene, die stark nutzt scoped-CSS-Variablen.

Lassen Sie uns beginnen Sie, indem Sie eine Blase. Eine statische Blase.

.Blase {
background: radial-gradient(100% 115% bei 25%, 25%, #fff, transparent 33%),
radial-Gradienten(15% 15% 75% 75%, #80dfff, transparent),
radial-gradient(100% 100% 50% 25%, transparent, #66d9ff 98%);
border: 1px solid #b3ecff;
border-radius: 100%;
height: 50px;
width: 50px;
}

Wir sind mit hintergrund mit mehreren Werten und eine Grenze zu machen, die Perl-Effekt — aber es ist nicht sehr dynamisch. Wir kennen die border-radius wird immer die gleiche sein. Und wir wissen, dass die Struktur den Rahmen und den hintergrund nicht ändern. Aber die Werte in diesen Eigenschaften, und die andere Eigenschaft, die Werte könnten alle zufällig sein.

Wir überarbeiten die CSS, um die Verwendung von Variablen:

.Blase {
–Größe: 50;
–Farbton: 195;
–bubble-Gliederung: hsl(var(–Farbton), 100%, 50%);
–Blase-Ort: hsl(var(–Farbton), 100%, 75%);
–bubble-Schatten: hsl(var(–Farbton), 100%, 70%);
background: radial-gradient(100% 115% bei 25%, 25%, #fff, transparent 33%),
radial-Gradienten(15% 15% 75% 75%, var(–bubble-spot), transparent),
radial-gradient(100% 100% 50% 25%, transparent, var(–bubble-Schatten) 98%);
border: 1px solid var(–bubble-Gliederung);
border-radius: 100%;
height: calc(var(–size) * 1px);
width: calc(var(–size) * 1px);
}

Das ist ein guter start. 👍

Siehe Stift
Blasen-Stiftung durch Jhey (@jh3y)
auf CodePen.

Lassen Sie ‘ s fügen Sie einige mehr Blasen, und nutzen Sie die inline-Bereich zur Positionierung als auch die Größe. Da wir im Begriff sind zu starten Randomisierung mehr als einen Wert, ist es praktisch, eine Funktion zum generieren einer zufälligen Zahl im Bereich für unsere markup.

– const randomInRange = (max, min) => Math.floor(Math.random() * (max – min + 1)) + min

Mit Mops, können wir nutzen, iteration, um einen großen Satz von Blasen:

– const baseHue = randomInRange(0, 360)
– const bubbleCount = 50
– let b = 0
während b < bubbleCount
– const size = randomInRange(10, 50)
– const x = randomInRange(0, 100)
.Blase(Stil=`–x: ${x}; –Größe: ${size}; –Farbton: ${baseHue}`)
– b++

Die Aktualisierung unserer .bubble styling ermöglicht uns die Verwendung der neuen inline-Variablen.

.Blase {
Links: calc(var (- x) * 1%);
position: absolute;
transform: translate(-50%, 0);
}

Geben Sie uns eine zufällige Reihe von Blasen:

Siehe Stift
Das hinzufügen von Blasen durch Jhey (@jh3y)
auf CodePen.

Nehmen wir es sogar noch weiter und animieren diese Blasen, so dass Sie Schwimmer von oben nach unten und verblassen.

.Blase {
animation: float 5s infinite ease-in-out;
top: 100%;
}

@keyframes float {
aus {
opacity: 1;
transform: translate(0, 0) scale(0);
}
zu {
Deckkraft: 0;
transform: translate(0, -100vh) scale(1);
}
}

Siehe Stift
Blasen steigen gemeinsam durch Jhey (@jh3y)
auf CodePen.

Das ist ziemlich langweilig. Sie alle tun die gleiche Sache zur gleichen Zeit. So lassen Sie uns, mischen Sie die Geschwindigkeit, Verzögerung, Ende, Ausmaß und Distanz der jede Blase zu Reisen.

– const randomInRange = (max, min) => Math.floor(Math.random() * (max – min + 1)) + min
– const baseHue = randomInRange(0, 360)
– const bubbleCount = 50
– let b = 0
während b < bubbleCount
– const size = randomInRange(10, 50)
– const Wartezeit = randomInRange(1, 10)
– const speed = randomInRange(2, 20)
– const Abstand = randomInRange(25, 150)
– const-scale = randomInRange(100, 150) / 100
– const x = randomInRange(0, 100)
.Blase(Stil=`–x: ${x}; –Größe: ${size}; –Farbton: ${baseHue}; –Distanz: ${Abstand}; –speed: ${Geschwindigkeit}; –Verzögerung: ${delay}; –Maßstab: ${scale}`)
– b++

Und jetzt wollen wir aktualisieren unsere Stile

.Blase {
animation-name: float;
animation-Dauer: calc(var(–speed) * 1s);
animation-delay: calc(var (- Verzögerung) * -1s);
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes float {
aus {
opacity: 1;
transform: translate(-50%, 0) scale(0);
}
zu {
Deckkraft: 0;
transform: translate(-50%, calc(var (- Entfernung) * -1vh)) der Skala(var(–scale));
}
}

Und bekommen wir diesen:

Siehe Stift
Random bubble-Szene, die mit Variablen Umfang 😎 von Jhey (@jh3y)
auf CodePen.

Mit rund 50 Zeilen code, können Sie eine zufällig generierte animierte Szene durch abziehen der power der Umfang! 💪

Das ist es!

Schaffen wir einige ziemlich Coole Dinge mit sehr wenig code, indem Sie CSS-Variablen zu verwenden, und das nutzen ein paar kleine tricks.

Ich hoffe, dieser Artikel wirft einige Bewusstsein für die macht von CSS-Variablen Umfang, und ich hoffe, Sie werden schärfen, die Kraft und pass auf 😎

Alle demos in diesem Artikel sind in diesem CodePen Sammlung.