使用自定义属性的全局 CSS 选项

Chris Coyier 于 2020 年 5 月 29 日

使用预处理器，如 Sass，构建一个逻辑性的“执行此操作或不执行此操作”设置相当简单

$option: false;

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

.el {
  @include doThing;
}

我们可以在原生 CSS 中使用自定义属性做到这一点吗？ Mark Otto 表明我们可以。只是稍微有点不同。

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;
}

直接链接 →

João Carlos

# 2020 年 5 月 31 日

有没有办法通过浏览器更改 css 属性的值，以便更新和保存更改？

john

# 2020 年 6 月 4 日

您可以使用 javascript 更改这些 css 变量并将结果保存到本地存储（或数据库中的某个地方）。这样每次刷新页面时，都会显示更新后的值。也许是这样的（未经测试）。

/* 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);
  });  
}

不确定这个 markdown 是否正确格式化（如果版主可以检查）。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。