为什么我放弃了使用了4年的SASS转而选择使用回原生CSS

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

变量

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

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

css 复制代码
//定义变量
:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

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

CSS的嵌套

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

css 复制代码
.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

    .blog-item {
      border: 1px solid var(--neutral-200);

      & span {
        font-size: 1rem;
      }
  }
}

:is 伪类

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

css 复制代码
:is(selector1, selector2, selector3) {
  /* 样式 */
}

:has 伪类

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

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

css 复制代码
.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

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

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

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

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

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

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

容器查询

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

css 复制代码
/* 定义一个名为 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-size: 2em;
  }
}

@layer(级联层)

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

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

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

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

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

css 复制代码
@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}
相关推荐
zhougl99630 分钟前
html处理Base文件流
linux·前端·html
花花鱼33 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_36 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript