狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

變量

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

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

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

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

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

:is 偽類

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

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

:has 偽類

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

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

.hero:has(.hero-button) {
  background-color: var(--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 以來最重大的創(chuàng)新。因為它可以根據(jù)指定容器在尺寸發(fā)生變化時，在滿足條件的情況下設置其內部元素樣式。類似@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-size: 2em;
  }
}

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

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

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

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

任何未在級聯(lián)層中聲明的 CSS 規(guī)則都會被收集到一個匿名的級聯(lián)層中，并放置在所有手動聲明的、有命名的和匿名的級聯(lián)層之后。這意味著任何未在級聯(lián)層中聲明的 CSS 規(guī)則都將覆蓋在級聯(lián)層中聲明的規(guī)則，與規(guī)則的權重無關。

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

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

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