CSS 原生嵌套完全实战指南：告别 Sass，拥抱浏览器原生能力

1
/* 传统写法 */
2
.card {
3
  padding: 16px;
4
}
5
.card .title {
6
  font-size: 18px;
7
  font-weight: bold;
8
}
9
.card .title:hover {
10
  color: #3b82f6;
11
}
12

13
/* 原生嵌套写法 */
14
.card {
15
  padding: 16px;
16

17
  .title {
18
    font-size: 18px;
19
    font-weight: bold;
20

21
    &:hover {
22
      color: #3b82f6;
23
    }
24
  }
25
}

1
.btn {
2
  background: #3b82f6;
3
  color: white;
4

5
  /* 伪类 */
6
  &:hover {
7
    background: #2563eb;
8
  }
9

10
  /* 伪元素 */
11
  &::after {
12
    content: '→';
13
    margin-left: 4px;
14
  }
15

16
  /* 组合选择器 */
17
  &.primary {
18
    background: #8b5cf6;
19
  }
20

21
  /* 父级上下文 */
22
  .dark-theme & {
23
    background: #1e40af;
24
  }
25
}

1
/* 替代方案 1：CSS 自定义属性 */
2
:root {
3
  --btn-base-padding: 8px 16px;
4
  --btn-base-radius: 4px;
5
  --btn-base-font: 14px/1.5 sans-serif;
6
}
7

8
.btn-primary {
9
  padding: var(--btn-base-padding);
10
  border-radius: var(--btn-base-radius);
11
  font: var(--btn-base-font);
12
  background: #3b82f6;
13
}
14

15
/* 替代方案 2：CSS @layer + 复合类 */
16
@layer base {
17
  .btn {
18
    padding: 8px 16px;
19
    border-radius: 4px;
20
  }
21
}

1
/* ❌ 不推荐：嵌套太深 */
2
.app {
3
  .layout {
4
    .main {
5
      .content {
6
        .article {
7
          .paragraph {
8
            color: #333;
9
          }
10
        }
11
      }
12
    }
13
  }
14
}
15

16
/* ✅ 推荐：控制在 3 层以内 */
17
.article {
18
  .paragraph {
19
    color: #333;
20
  }
21
}

1
.user-profile {
2
  display: flex;
3
  gap: 16px;
4
  padding: 24px;
5
  border-radius: 12px;
6
  background: white;
7
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
8

9
  .avatar {
10
    width: 64px;
11
    height: 64px;
12
    border-radius: 50%;
13
    object-fit: cover;
14
  }
15

16
  .info {
17
    flex: 1;
18

19
    .name {
20
      font-size: 18px;
21
      font-weight: 600;
22
      color: #1a1a1a;
23
    }
24

25
    .bio {
26
      margin-top: 4px;
27
      font-size: 14px;
28
      color: #666;
29
      line-height: 1.6;
30
    }
31
  }
32

33
  &:hover {
34
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
35
    transform: translateY(-2px);
36
    transition: all 0.2s ease;
37
  }
38
}

1
.input-field {
2
  border: 1px solid #d1d5db;
3
  border-radius: 8px;
4
  padding: 10px 14px;
5
  font-size: 14px;
6
  transition: border-color 0.15s;
7

8
  &:focus {
9
    outline: none;
10
    border-color: #3b82f6;
11
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
12
  }
13

14
  &:disabled {
15
    background: #f3f4f6;
16
    color: #9ca3af;
17
    cursor: not-allowed;
18
  }
19

20
  &[aria-invalid="true"] {
21
    border-color: #ef4444;
22

23
    &:focus {
24
      box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
25
    }
26
  }
27

28
  &.large {
29
    padding: 14px 18px;
30
    font-size: 16px;
31
  }
32
}

1
.dashboard-grid {
2
  display: grid;
3
  gap: 16px;
4
  grid-template-columns: 1fr;
5

6
  @media (min-width: 640px) {
7
    grid-template-columns: repeat(2, 1fr);
8
  }
9

10
  @media (min-width: 1024px) {
11
    grid-template-columns: repeat(3, 1fr);
12
    gap: 24px;
13
  }
14

15
  .card {
16
    padding: 20px;
17
    border-radius: 12px;
18
    background: white;
19

20
    @media (min-width: 1024px) {
21
      padding: 28px;
22
    }
23

24
    &.featured {
25
      grid-column: span 2;
26

27
      @media (max-width: 639px) {
28
        grid-column: span 1;
29
      }
30
    }
31
  }
32
}

1
.button {
2
  padding: 10px 20px;
3
  border-radius: 8px;
4
  font-weight: 500;
5
  cursor: pointer;
6
  transition: all 0.2s;
7

8
  /* 亮色主题（默认） */
9
  background: #3b82f6;
10
  color: white;
11

12
  &:hover {
13
    background: #2563eb;
14
  }
15

16
  /* 暗色主题 */
17
  @media (prefers-color-scheme: dark) {
18
    background: #60a5fa;
19
    color: #1e293b;
20

21
    &:hover {
22
      background: #93c5fd;
23
    }
24
  }
25

26
  /* 手动暗色类 */
27
  .dark & {
28
    background: #60a5fa;
29
    color: #1e293b;
30
  }
31
}

1
@layer reset, base, components, utilities;
2

3
@layer base {
4
  a {
5
    color: inherit;
6
    text-decoration: none;
7

8
    &:hover {
9
      text-decoration: underline;
10
    }
11
  }
12
}
13

14
@layer components {
15
  .nav-link {
16
    padding: 8px 16px;
17
    border-radius: 6px;
18

19
    &:hover {
20
      background: #f1f5f9;
21
      text-decoration: none; /* 覆盖 base 层 */
22
    }
23

24
    &.active {
25
      background: #3b82f6;
26
      color: white;
27
    }
28
  }
29
}

1
.theme-card {
2
  --card-bg: #ffffff;
3
  --card-text: #1a1a1a;
4
  --card-border: #e5e7eb;
5
  --card-shadow: rgb(0 0 0 / 0.05);
6

7
  background: var(--card-bg);
8
  color: var(--card-text);
9
  border: 1px solid var(--card-border);
10
  box-shadow: 0 2px 8px var(--card-shadow);
11
  border-radius: 12px;
12
  padding: 24px;
13

14
  @media (prefers-color-scheme: dark) {
15
    --card-bg: #1e293b;
16
    --card-text: #f1f5f9;
17
    --card-border: #334155;
18
    --card-shadow: rgb(0 0 0 / 0.3);
19
  }
20

21
  .title {
22
    font-size: 20px;
23
    font-weight: 700;
24
    margin-bottom: 8px;
25
  }
26

27
  .meta {
28
    font-size: 13px;
29
    color: color-mix(in srgb, var(--card-text) 60%, transparent);
30
  }
31
}

1
/* 如果样式没生效，检查这些 */
2

3
/* 1. 是否误用了 & 拼接？ */
4
.card {
5
  &-header { } /* ❌ 无效 */
6
  .card-header { } /* ✅ */
7
}
8

9
/* 2. 选择器优先级是否被 :is() 影响？ */
10
/* 用 DevTools 的 Computed 面板查看最终优先级 */
11

12
/* 3. 嵌套是否超出了浏览器支持范围？ */
13
/* 用 @supports 做降级 */
14
@supports (selector(&)) {
15
  .modern-component {
16
    .child { color: blue; }
17
  }
18
}