Globale CSS-Optionen mit benutzerdefinierten Eigenschaften

Chris Coyier am 29. Mai 2020

Mit einem Präprozessor wie Sass ist das Erstellen einer logischen "Tu dies oder tu es nicht"-Einstellung ziemlich einfach

$option: false;

@mixin doThing {
  @if $option {
    do-thing: yep;
  }
}

.el {
  @include doThing;
}

Können wir das in nativem CSS mit benutzerdefinierten Eigenschaften machen? Mark Otto zeigt, dass wir das können. Es ist nur ein kleines bisschen anders.

html {
  --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.component {
  box-shadow: var(--component-shadow);
}

<!-- override the global anywhere more specific! like
     <div class="component remove-shadow">
     or
     <body class="remove-shadow"> -->
.remove-shadow {
  --component-shadow: none;
}

Direkter Link →

Kommentare

João Carlos

Permalink zum Kommentar# 31. Mai 2020

Gibt es eine Möglichkeit, die Werte der CSS-Eigenschaften vom Browser aus zu ändern, sodass die Änderungen aktualisiert und gespeichert werden?
- John
  
  Permalink zum Kommentar# 4. Juni 2020
  Du kannst JavaScript verwenden, um diese CSS-Variablen zu ändern und die Ergebnisse im LocalStorage (oder einer Datenbank) zu speichern. Auf diese Weise werden jedes Mal, wenn du die Seite aktualisierst, die aktualisierten Werte angezeigt. Etwas wie das hier vielleicht (ungetestet).
```
/* CSS */
:root {
  --primary: red;
}
```
```
/* JS */
// Update the primary variable to blue    
let variables = {
  '--primary' : blue
}

setCustomProperties(variables);      

// Save to localStorage 
window.localStorage.setItem('variables' JSON.stringify(variables))

// Retrieve from localStorage
let variableHydrate = JSON.parse(window.localStorage.getItem('variables'))

setCustomProperties(variableHydrate)

function setCustomProperties() {
  return Object.entries(variables).forEach(([key, value]) => {
  document.documentElement.style.setProperty(key, val);
  });  
}
```
  Ich bin mir nicht sicher, ob dieses Markdown richtig formatiert ist (falls ein Moderator dies überprüfen könnte).

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.