AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS进阶之CSS变量

2022-06-08 315
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS进阶之CSS变量
  • 前言
  • 基本用法
  • 使用自定义属性的第一步
  • 自定义属性的继承
  • 自定义属性的回调值
  • 有效性和值
  • 无效的变量会发生什么
  • 通过js中获取到的css变量值
  • var()与rgba()配合实现复用变量
  • vue实战: 通过颜色选择器切换热力图主题颜色


前言

自定义属性（有时可以称为CSS变量或者层叠variables）是由CSS作者定义的实体，这些实体在一个document内可以被重用。一般按照自定义属性的符号设置（比如，--main-color: black；）然后使用var()函数使用。（例如color: var(--main-color)）


复杂的网站有大量的CSS，通常会有很多重复的值。例如，同一个颜色可能会被在几百个地方都用到，可以从全局搜索去一次性替换掉。自定义属性允许这个值存储在一个地方，然后再多个地方引用。另一个好处是语义标识符号。（semantic identifier）例如，--main-text-color比#00ff00更容易理解，尤其是这个值在其他的上下文中也存在时。


自定义属性遵循级联，会从父级继承它们的值。


基本用法

定义一个自定义的属性需要用--开始，然后属性的值需要是一个有效的CSS值。

和任何其他的属性一样，在一个规则集中定义：


element {
    --main-bg-color: brown;
}


请注意规则集中的选择器定义了自定义属性可以使用的scope。一个通常的最佳实践是定义在:root伪类上，从而可以在HTML document全局获得权限：

:root {
    --main-bg-color: brown;
}


不过你也可以在局部scope中使用css变量。


注意：css变量的属性名大小写敏感，--my-color会被当作--My-color属性。


就像上面提到的，使用自定义属性的话，需要在var()函数中使用。


element {
    background-color: var(--main-bg-color);
}


使用自定义属性的第一步

在不同的class中应用相同的颜色。


.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}
.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}
.five {
  background-color: brown;
}


<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>


image.png


注意css中的重复部分，背景色多次用到，可以声明一个css变量。不过一般还是在:root上使用：


:root {
    --main-bg-color: brown;
}
.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}
.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}
.five {
  background-color: var(--main-bg-color);
}


自定义属性的继承

自定义属性会继承。这也就意味着如果给定的element没有属性值，会继承父元素的值：


.two {
    --test: 10px;
}
.three {
    --test: 2em;
}


<div class="one"> <!--invalid-->
  <div class="two"><!--10px-->
    <div class="three"></div><!--2em-->
    <div class="four"></div><!--10px-->
  </div>
</div>


不要试图把它当做一个和其他语言中的变量一样的东西，css自定义属性最终展现形式是computed值，所以不要妄想去子样式中查找到这个变量。自定义属性仅仅对匹配到的选择器和它的子元素有效，和普通css一样。


自定义属性的回调值

使用var()的时候，可以使用回调函数。

var()函数不仅仅可以用于默认的标签，对于自定义的标签和Shadow DOM都适用。


注意：fallback可用于提升兼容性。


规则可以看下面的例子：

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {
  background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}
.three {
  background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}


注意：

  • 第二种可能会有性能问题，因为要不断地一层一层往下找。
  • 第一个例子中的var(--my-var, red)还可以写成var(--my-var, red, blue)。


有效性和值


与每个属性相关的经典CSS有效性概念在定制属性方面不是很有用。当解析自定义属性的值时，浏览器不知道将在何处使用它们，因此必须考虑几乎所有值都是有效的。不幸的是，这些有效值可以通过var()函数表示法在可能没有意义的上下文中使用。属性和自定义变量可能导致无效的CSS语句，从而导致在计算时间有效的新概念。


无效的变量会发生什么


  1. 检查是否有父元素可以继承
  2. 设置成默认的初始值

比如这个例子：


<p>This paragraph is initial black.</p> 
:root { --text-color: 16px; } 
p { color: blue; } 
p { color: var(--text-color); }


这个例子中的p的color属性应用了var函数，但是16px是color的无效属性值。因此找父元素，但是没有父元素，所以这个color的值替换为default initial value，替换以后这个属性就恢复为默认属性了。

注意：虽然CSS属性/值对中的语法错误将导致该行被忽略。但是使用级联值、无效替换(使用无效的自定义属性值)不会被忽略，从而导致该值被继承。


通过js中获取到的css变量值


// 从行内样式中中获取变量
element.style.getPropertyValue("--my-var");
// 从任何地方获取到变量
getComputedStyle(element).getPropertyValue("--my-var");
// 在行内样式中设置变量
element.style.setProperty("--my-var", jsVar + 4);


var()与rgba()配合实现复用变量

:root {
  --my-var: 24, 144, 255;
}
.custom-bg-1 {
  background-color: rgba(var(--my-var), 0.5);
}
.custom-bg-2 {
  background-color: rgba(var(--my-var), 0.7);
}

vue实战: 通过颜色选择器切换热力图主题颜色


基于iView的ColorPick组件，实现用户根据自己的喜好切换主题色。

heat.scss


:root {
  --heat-cell-bgc: 24, 144, 255;
}
.custom-alpha-8-1 {
  background-color: rgba(var(--heat-cell-bgc), 0.125) !important;
}
.custom-alpha-8-2 {
  background-color: rgba(var(--heat-cell-bgc), 0.25) !important;
}
...
.custom-alpha-8-8 {
  background-color: rgba(var(--heat-cell-bgc), 1) !important;
}


colorFilter.vue

<template>
  <div>
    <ColorPicker
      v-model="cellBackgroundColor"
      placement="bottom-start"
      @on-change="colorChange"
      format="rgb"
    />
  </div>
</template>
<script>
const getRGB = (str) => {
  const match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);
  return match
    ? {
        red: match[1],
        green: match[2],
        blue: match[3],
      }
    : {};
};
export default {
  name: 'color-filter',
  data() {
    return {
      cellBackgroundColor: 'rgb(24, 144, 255)',
    };
  },
  methods: {
    colorChange(color) {
      // 抽离出rgb值
      const { red, green, blue } = getRGB(color);
      const rgb = `${red},${green},${blue}`;
      // 找到root元素
      const rootElement = document.documentElement;
      // 更新背景色css变量
      rootElement.style.setProperty('--heat-cell-bgc', rgb);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>



image.gif


参考链接：





文章标签：
JavaScript
前端开发
存储
关键词：
CSS变量
CSS进阶
CSS进阶变量
趁你还年轻233
目录
相关文章
大树营养快线
|
14天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
54 15
大树营养快线
|
14天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同？
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念，但由于它们所属的语言和应用场景不同，其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
大树营养快线
50 14
大树营养快线
|
14天前
|
前端开发 JavaScript
如何在 CSS 变量中使用函数？
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理，但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合，可以在很大程度上实现类似函数的功能，提高CSS样式的灵活性和可维护性，满足各种不同的页面设计和交互需求。
大树营养快线
41 12
大树营养快线
|
14天前
|
前端开发 开发者 容器
CSS 变量的作用域是什么？
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域，以及掌握变量的覆盖和继承规则，可以创建更具可维护性、灵活性和可扩展性的CSS样式表，实现各种复杂的页面设计和样式需求。
大树营养快线
38 7
大树营养快线
|
14天前
|
前端开发 JavaScript UED
如何在内联样式中设置 CSS 变量？
【10月更文挑战第28天】
大树营养快线
27 6
大树营养快线
|
14天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值？
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化，根据不同的应用场景和需求，可以选择合适的方法来实现CSS变量的动态修改，从而提高页面的灵活性和用户体验。
大树营养快线
32 5
夏天49597
|
5月前
|
前端开发 JavaScript UED
CSS进阶 - CSS性能优化
【6月更文挑战第17天】**CSS性能优化关乎美观与速度。减少无用和重复样式，简化选择器，避免频繁重绘与回流，预加载关键CSS，以及模块化代码，能提升加载速度和用户体验。通过代码审查、工具辅助、选择器优化、使用transform和opacity、CSS预加载、以及文件拆分和模块化，开发者可应对复杂网页的性能挑战。**
夏天49597
87 2
夏天49597
|
5月前
|
前端开发 JavaScript 开发者
CSS进阶 - CSS Modules与预处理器简介
【6月更文挑战第17天】前端开发中，CSS Modules和预处理器（如Sass、Less）解决了大规模项目中CSS的管理难题，提升代码复用和维护性。CSS Modules提供局部作用域的类名，避免全局冲突，而预处理器扩展CSS功能，使代码更像编程语言。常见问题包括命名冲突和过度嵌套，可通过自动哈希、少嵌套、合理变量规划来解决。结合两者使用，遵循模块化和适度预处理原则，集成到构建工具中，能优化开发流程。这些技术是现代前端不可或缺的工具。
夏天49597
68 2
夏天49597
|
5月前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备，确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术，允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理，可创建高效、易维护的响应式网站。
夏天49597
44 1
六卿
|
2月前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量，来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
六卿
42 0