LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

如何在CSS样式表设计中通过使用JavaScript动态修改变量


2024年7月14日 13:3 本文热度 636

Sass 作为一个强大的CSS预处理器,在过去十年里广受大家好评。它能够帮助我们高效地组织可扩展和稳定的 CSS 代码。然而,随着CSS的快速发展。曾经只有 Sass 才有的特性现在已经集成到 CSS 中了,包括Sass最引以为豪的变量语法和嵌套语法。

变量

在曾经很长的一段时间里,能够在CSS中定义变量被视为是 SCSS 的最独特优势,通过定义变量的方式,我们可以批量的管理属性,并且这也是原生CSS中一直被人吐槽的地方(当我们需要修改同一个属性时,需要修改多次)。但是随着CSS的快速发展, CSS 中也支持定义变量这种语法了,它的定义方式类似于 Sass。但是,它们之间的一个重大区别,是Sass的变量仅存在于预处理器上下文中,而 我们的CSS 变量可以在浏览器中使用,甚至可以通过 JavaScript 动态修改

下面我们就示例如何在原始CSS中定义变量。

//定义变量
:root {
  --button-padding10px 20px;
  --button-bg-color#007bff;
  --button-text-color#ffffff;
  --button-border-radius8px;
}

//使用变量
.button {
  paddingvar(--button-padding);
  background-colorvar(--button-bg-color);
  colorvar(--button-text-color);
  border-radiusvar(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

CSS的嵌套

在样式的编写中 嵌套式的语法帮助了我们大大的减轻工作量也提高了代码的可读性。

.blog {
  position: relative;
  padding1rem;
  backgroundvar(--neutral-100);

    .blog-item {
      border1px solid var(--neutral-200);

      & span {
        font-size1rem;
      }
  }
}

:is 伪类

:is 伪类是通过接受一个选择器列表为参数,然后将后边的样式分别赋值给每个作为参数的选择器,它大大的减少了我们样式中的重复代码,并且可以大大的提高我们的编写代码的效率。

:is(selector1selector2selector3) {
  /* 样式 */
}

:has 伪类

:has()表示满足一定条件后,就会匹配该元素,并且括号里面可以填组合选择器类选择器ID 选择器属性选择器

选择包含特定子元素的父元素

.hero:has(.hero-button) {
  background-colorvar(--accent-50);
}

选择包含特定标签名的子元素的父元素:

cssCopy code
/* 选择包含 <span> 标签的子元素的 div 元素 */
div:has(span) {
    /* CSS 样式 */
}

选择包含指定属性的子元素的父元素:

cssCopy code
/* 选择包含有属性 "href" 的子元素的 a 元素 */
a:has([href]) {
    /* CSS 样式 */
}

选择包含特定属性值的子元素的父元素:

cssCopy code
/* 选择包含具有 "data-active" 属性并且值为 "true" 的子元素的 div 元素 */
div:has([data-active="true"]) {
    /* CSS 样式 */
}

容器查询

容器查询被认为是 CSS3 以来最重大的创新。因为它可以根据指定容器在尺寸发生变化时,在满足条件的情况下设置其内部元素样式。类似@media,但不同的是@container是针对容器元素,而@media针对的是浏览器窗口。

/* 定义一个名为 component 的 CSS 类 */
.component {
  /* 设置一个名为 --theme 的 CSS 变量,值为 dark */
  --theme: dark;
  /* 设置 container-name 属性的值为 fancy */
  container-name: fancy;
}

/* 使用 @container 自定义容器查询 */
/* 当容器名称为 fancy 且主题为 dark 时,应用下列样式 */
@container fancy style(--theme: dark) {
  /* 选择所有类名为 fancy 的元素 */
  .fancy {
    /* 在这里定义 "dark" 主题下的样式 */
    /* 这里可以添加一些适用于暗色主题的样式 */
  }
}

/* 使用媒体查询 */
/* 当视口宽度达到至少 720 像素时,应用下列样式 */
@container (min-width: 720px) {
  /* 选择所有类名为 headline 的元素 */
  .headline {
    /* 设置字体大小为 2em */
    font-size2em;
  }
}

@layer(级联层)

作用:用于控制样式表中规则的层叠顺序。它允许我们将样式表中的规则分组到不同的层中。

在 CSS 中,不同来源的样式规则具有不同的优先级。例如,开发者编写的样式表(作者样式表)比浏览器默认样式表(用户代理样式表)具有更高的优先级。这种优先级关系可以被理解为“级联规则”。

使用级联层,开发者可以更灵活地控制这些级联规则。在级联层 A 中声明的 CSS 规则与级联层 B 中的规则完全独立,它们的生效与否仅取决于它们所在的级联层(除非使用了 !important)。因此,当我们希望引入第三方样式表但又不希望第三方某些高优先级的规则覆盖原始的同名规则时,可以使用级联层来实现这一目的。

任何未在级联层中声明的 CSS 规则都会被收集到一个匿名的级联层中,并放置在所有手动声明的、有命名的和匿名的级联层之后。这意味着任何未在级联层中声明的 CSS 规则都将覆盖在级联层中声明的规则,与规则的权重无关。

通过使用级联层,开发者可以更好地管理样式规则,确保特定规则的优先级,以及更好地控制第三方样式表的影响。

@layer utilities {
  .button {
    padding0.5rem;
  }

  .button--lg {
    padding0.8rem;
  }
}



该文章在 2024/7/15 16:19:04 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved