likes
comments
collection
share

探索 CSS 原生嵌套功能与 CSS 变量

作者站长头像
站长
· 阅读数 23

随着 CSS 的不断发展，原生嵌套功能和 CSS 变量的引入使得我们能够更加简洁和直观地编写样式表。在这篇博客中，我们将详细介绍 CSS 原生嵌套功能的基本用法，包括基本嵌套、使用 & 符号、伪类和伪元素以及媒体查询。同时，我们也会探讨 CSS 变量的定义、使用、作用域、默认值以及如何动态改变它们。

CSS 原生嵌套功能

基本使用

CSS 原生嵌套允许我们在一个选择器内嵌套另一个选择器，使得样式的层次结构更加清晰。以下是一个简单的示例：

<style>
  div {
    span {
      color: skyblue;
    }
  }
</style>

<div>
  <span>lorem</span>
</div>

在这个例子中，span 选择器被嵌套在 div 选择器内，这表示所有位于 div 内的 span 元素将会被应用 color: skyblue 样式。请注意，这种语法可能需要在一些浏览器中启用实验性功能。

使用 & 符号

在 CSS 原生嵌套中，& 符号表示父选择器，可以用来引用当前嵌套的父选择器。这在处理类名组合时非常有用：

<style>
  div {
    &.lorem {
      span {
        color: skyblue;
      }
    }
  }
</style>

<div class="lorem">
  <span>lorem</span>
</div>

<div>
  <span>lorem</span>
</div>

在这个例子中，&.lorem 表示 div.lorem，因此只有类名为 lorem 的 div 内的 span 元素才会被应用 color: skyblue 样式。

伪类和伪元素

CSS 原生嵌套还支持伪类和伪元素的嵌套，使得样式定义更加直观：

<style>
  .lorem {
    &:hover {
      color: skyblue;
    }

    + span {
      color: red;
    }
  }

  div {
    span {
      &:last-of-type {
        color: greenyellow;

        &::after {
          content: 'lorem-after';
          margin-left: 5px;
          color: gray;
        }
      }
    }
  }
</style>

<div>
  <span class="lorem">lorem1</span>
  <span>lorem2</span>
  <span>lorem3</span>
</div>

在这个例子中，我们展示了如何在嵌套选择器中使用伪类 :hover 和 :last-of-type 以及伪元素 ::after。

媒体查询

CSS 原生嵌套还支持在选择器内部嵌套媒体查询，使得响应式设计更加方便：

<style>
  .lorem {
    color: red;

    @media screen and (min-width: 500px) {
      color: skyblue;
    }

    @media screen and (min-width: 1500px) {
      color: gray;
    }
  }
</style>

<span class="lorem">lorem</span>

在这个例子中，我们为 .lorem 类定义了不同屏幕宽度下的不同颜色样式。

CSS 变量

CSS 变量（又称为自定义属性）使得我们可以定义可重用的值，并在整个样式表中引用这些值。它们的定义和使用非常简单，并且可以在全局或局部范围内使用。

定义和使用

可以使用 -- 前缀来定义变量，并使用 var() 函数来引用它们：

:root {
  --main-bg-color: #3498db;
  --main-text-color: #ffffff;
  --padding: 10px;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  padding: var(--padding);
}

局部变量

CSS 变量不仅可以在全局范围内使用，还可以在局部范围内定义和使用。例如，你可以在特定的选择器中定义变量，这些变量只在该选择器的上下文中有效：

.card {
  --card-bg-color: #ffffff;
  --card-text-color: #333333;
  background-color: var(--card-bg-color);
  color: var(--card-text-color);
}

变量的作用域

CSS 变量的作用域是基于它们被定义的位置。全局变量在 :root 中定义，可以在整个文档中使用；局部变量只在它们定义的选择器及其子选择器中有效。如果一个变量在多个地方定义，最近的定义会覆盖之前的定义：

:root {
  --color: red;
}

div {
  --color: blue;
}

p {
  color: var(--color); /* 如果 p 是 div 的子元素，则颜色为蓝色，否则为红色 */
}

默认值

var() 函数可以接受一个可选的第二个参数，作为变量未定义时的默认值：

p {
  color: var(--undefined-color, black); /* 如果 --undefined-color 未定义，则使用黑色 */
}

动态改变变量

CSS 变量可以通过 JavaScript 动态改变，从而实现动态样式的变化：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables</title>
  <style>
    :root {
      --main-bg-color: #3498db;
    }
    body {
      background-color: var(--main-bg-color);
    }
  </style>
</head>
<body>
  <button onclick="changeColor()">Change Color</button>
  <script>
    function changeColor() {
      document.documentElement.style.setProperty('--main-bg-color', '#e74c3c');
    }
  </script>
</body>
</html>

在这个例子中，当点击按钮时，页面背景颜色会从蓝色变为红色。

转载自:https://juejin.cn/post/7394853592056660004
评论
请登录