最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

如何在项目的全局设置中使用自定义属性的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选项,则该选项将优先于后备值。若要启用.componentbox-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中的全局选项进行一些基本控制,而无需预处理器。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何在项目的全局设置中使用自定义属性的CSS变量选项

发表评论