Sass 作為一個(gè)強(qiáng)大的CSS預(yù)處理器，在過(guò)去十年里廣受大家好評(píng)。它能夠幫助我們高效地組織可擴(kuò)展和穩(wěn)定的 CSS 代碼。然而，隨著CSS的快速發(fā)展。曾經(jīng)只有 Sass 才有的特性現(xiàn)在已經(jīng)集成到 CSS 中了，包括Sass最引以為豪的變量語(yǔ)法和嵌套語(yǔ)法。

變量

在曾經(jīng)很長(zhǎng)的一段時(shí)間里，能夠在CSS中定義變量被視為是 SCSS 的最獨(dú)特優(yōu)勢(shì)，通過(guò)定義變量的方式，我們可以批量的管理屬性，并且這也是原生CSS中一直被人吐槽的地方（當(dāng)我們需要修改同一個(gè)屬性時(shí)，需要修改多次）。但是隨著CSS的快速發(fā)展， CSS 中也支持定義變量這種語(yǔ)法了，它的定義方式類似于 Sass。但是，它們之間的一個(gè)重大區(qū)別，是Sass的變量?jī)H存在于預(yù)處理器上下文中，而 我們的CSS 變量可以在瀏覽器中使用，甚至可以通過(guò) JavaScript 動(dòng)態(tài)修改。

下面我們就示例如何在原始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的嵌套

在樣式的編寫(xiě)中 嵌套式的語(yǔ)法幫助了我們大大的減輕工作量也提高了代碼的可讀性。

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

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

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

:is 偽類

:is 偽類是通過(guò)接受一個(gè)選擇器列表為參數(shù)，然后將后邊的樣式分別賦值給每個(gè)作為參數(shù)的選擇器，它大大的減少了我們樣式中的重復(fù)代碼，并且可以大大的提高我們的編寫(xiě)代碼的效率。

:is(selector1, selector2, selector3) {
  /* 樣式 */
}

:has 偽類

:has()表示滿足一定條件后，就會(huì)匹配該元素，并且括號(hào)里面可以填組合選擇器、類選擇器、ID 選擇器、屬性選擇器

選擇包含特定子元素的父元素

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

選擇包含特定標(biāo)簽名的子元素的父元素：

cssCopy code
/* 選擇包含 <span> 標(biāo)簽的子元素的 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 樣式 */
}

容器查詢

容器查詢被認(rèn)為是 CSS3 以來(lái)最重大的創(chuàng)新。因?yàn)樗梢愿鶕?jù)指定容器在尺寸發(fā)生變化時(shí)，在滿足條件的情況下設(shè)置其內(nèi)部元素樣式。類似@media，但不同的是@container是針對(duì)容器元素，而@media針對(duì)的是瀏覽器窗口。

/* 定義一個(gè)名為 component 的 CSS 類 */
.component {
  /* 設(shè)置一個(gè)名為 --theme 的 CSS 變量，值為 dark */
  --theme: dark;
  /* 設(shè)置 container-name 屬性的值為 fancy */
  container-name: fancy;
}

/* 使用 @container 自定義容器查詢 */
/* 當(dāng)容器名稱為 fancy 且主題為 dark 時(shí)，應(yīng)用下列樣式 */
@container fancy style(--theme: dark) {
  /* 選擇所有類名為 fancy 的元素 */
  .fancy {
    /* 在這里定義 "dark" 主題下的樣式 */
    /* 這里可以添加一些適用于暗色主題的樣式 */
  }
}

/* 使用媒體查詢 */
/* 當(dāng)視口寬度達(dá)到至少 720 像素時(shí)，應(yīng)用下列樣式 */
@container (min-width: 720px) {
  /* 選擇所有類名為 headline 的元素 */
  .headline {
    /* 設(shè)置字體大小為 2em */
    font-size: 2em;
  }
}

@layer（級(jí)聯(lián)層）

作用：用于控制樣式表中規(guī)則的層疊順序。它允許我們將樣式表中的規(guī)則分組到不同的層中。

在 CSS 中，不同來(lái)源的樣式規(guī)則具有不同的優(yōu)先級(jí)。例如，開(kāi)發(fā)者編寫(xiě)的樣式表（作者樣式表）比瀏覽器默認(rèn)樣式表（用戶代理樣式表）具有更高的優(yōu)先級(jí)。這種優(yōu)先級(jí)關(guān)系可以被理解為“級(jí)聯(lián)規(guī)則”。

使用級(jí)聯(lián)層，開(kāi)發(fā)者可以更靈活地控制這些級(jí)聯(lián)規(guī)則。在級(jí)聯(lián)層 A 中聲明的 CSS 規(guī)則與級(jí)聯(lián)層 B 中的規(guī)則完全獨(dú)立，它們的生效與否僅取決于它們所在的級(jí)聯(lián)層（除非使用了 !important）。因此，當(dāng)我們希望引入第三方樣式表但又不希望第三方某些高優(yōu)先級(jí)的規(guī)則覆蓋原始的同名規(guī)則時(shí)，可以使用級(jí)聯(lián)層來(lái)實(shí)現(xiàn)這一目的。

任何未在級(jí)聯(lián)層中聲明的 CSS 規(guī)則都會(huì)被收集到一個(gè)匿名的級(jí)聯(lián)層中，并放置在所有手動(dòng)聲明的、有命名的和匿名的級(jí)聯(lián)層之后。這意味著任何未在級(jí)聯(lián)層中聲明的 CSS 規(guī)則都將覆蓋在級(jí)聯(lián)層中聲明的規(guī)則，與規(guī)則的權(quán)重?zé)o關(guān)。

通過(guò)使用級(jí)聯(lián)層，開(kāi)發(fā)者可以更好地管理樣式規(guī)則，確保特定規(guī)則的優(yōu)先級(jí)，以及更好地控制第三方樣式表的影響。

@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}