如何在项目的全局设置中使用自定义属性的CSS变量选项
我一直在想一些关于如何在项目的全局设置中使用自定义属性(又称 CSS 变量)的想法。之所以有这个想法是要为设计师/开发人员提供跨多个组件的一致样式的控制。
如何实现这一想法?
使用 Sass,很容易:
推荐阅读:《[Sass 进阶]Sass 的控制命令》
// 全局选项 $enable-shadows: false; // 定义一个 Mixins 模块 @mixin box-shadow($shadow...) { @if $enable-shadows { box-shadow: $shadow; } } // 使用 .component { @include box-shadow(0 .5rem 1rem rgba(0,0,0,.1)); }
默认情况下,除非将$enable shadows 更改为 true,否则 box-shadow 不会包含在编译的 CSS 中。
对于自定义属性,由于后备值的原因,逻辑非常相似。如果存在全局--enable shadows
选项,则该选项将优先于后备值。若要启用.component
的box-shadow
,注释或删除--enable-shadows
。
代码如下:
:root { --enable-shadows: none; } .component { box-shadow: var(--enable-shadows, 0 .5rem 1rem rgba(0,0,0,.1)); }
当然还可以通过指定全局阴影变量并使用实用程序或修饰符类在组件级别覆盖该变量,接下来以另一种方式进行处理。
代码如下:
// 全局选项 :root { --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1); } // 使用 .component { box-shadow: var(--component-shadow); } .remove-shadow { // 因为自定义属性在此规则集中,它只会移除这个类的阴影 --component-shadow: none; }
这样一来,我们就可以对 CSS 中的全局选项进行一些基本控制,而无需预处理器。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何在项目的全局设置中使用自定义属性的CSS变量选项
码云笔记 » 如何在项目的全局设置中使用自定义属性的CSS变量选项