【SCSS进阶】2、高级变量和数据结构（列表、映射）

【SCSS进阶】高级变量和数据结构（列表、映射）

---

系列文章目录

【SCSS进阶】1、控制指令（@if、@for、@each、@while）
【SCSS进阶】2、高级变量和数据结构（列表、映射）（本文）
【SCSS进阶】3、深度嵌套和模块化设计
【SCSS进阶】4、高级混合宏和占位符选择器
【SCSS进阶】5、自定义函数
【SCSS进阶】6、CSS网格和Flexbox布局
【SCSS进阶】7、响应式设计和媒体查询
【SCSS进阶】8、优化和压缩SCSS代码
【SCSS进阶】9、与PostCSS、Autoprefixer等工具的集成
【SCSS进阶】10、最佳实践和性能优化

---

在前面的文章中，我们学习了SCSS中的控制指令。本章将深入探讨SCSS中的高级变量和数据结构，包括列表（List）和映射（Map）。这些数据结构能够帮助你更高效地管理和操作样式数据，提升代码的可维护性和复用性。

列表（List）

列表是SCSS中的一种数据结构，允许你存储一组有序的值。列表中的值可以是任何有效的SCSS值类型，包括数字、字符串、颜色、变量、甚至其他列表。

定义和使用列表

示例：定义列表

$colors: red, green, blue;
$font-sizes: 12px 14px 16px 18px; // 逗号或空格分隔的值都是有效的列表

访问列表元素

你可以使用 nth 函数访问列表中的元素。nth 函数的索引从1开始。

示例：访问列表元素

$colors: red, green, blue;

.primary-color {
  color: nth($colors, 1); // 输出 red
}

.secondary-color {
  color: nth($colors, 2); // 输出 green
}

编译后的CSS代码：

.primary-color {
  color: red;
}

.secondary-color {
  color: green;
}

列表函数

SCSS提供了一组函数来操作列表，包括获取列表长度、合并列表、追加元素等。

示例：列表函数

$colors: red, green, blue;

.primary-color {
  color: nth($colors, 1);
}

.secondary-color {
  color: nth($colors, 2);
}

$more-colors: append($colors, yellow); // 追加元素

.all-colors {
  @each $color in $more-colors {
    .color-#{$color} {
      color: $color;
    }
  }
}

编译后的CSS代码：

.primary-color {
  color: red;
}

.secondary-color {
  color: green;
}

.color-red {
  color: red;
}

.color-green {
  color: green;
}

.color-blue {
  color: blue;
}

.color-yellow {
  color: yellow;
}

嵌套列表

列表可以嵌套，以创建更复杂的数据结构。

示例：嵌套列表

$nested-list: (1, 2, 3), (4, 5, 6), (7, 8, 9);

.item {
  @each $list in $nested-list {
    @each $item in $list {
      .item-#{$item} {
        content: "#{$item}";
      }
    }
  }
}

编译后的CSS代码：

.item-1 {
  content: "1";
}

.item-2 {
  content: "2";
}

.item-3 {
  content: "3";
}

.item-4 {
  content: "4";
}

.item-5 {
  content: "5";
}

.item-6 {
  content: "6";
}

.item-7 {
  content: "7";
}

.item-8 {
  content: "8";
}

.item-9 {
  content: "9";
}

映射（Map）

映射（Map）是SCSS中的另一种数据结构，允许你存储键值对。映射可以用于存储复杂的样式数据，并通过键来访问对应的值。

定义和使用映射

示例：定义映射

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

访问映射元素

你可以使用 map-get 函数访问映射中的值。

示例：访问映射元素

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.primary-color {
  color: map-get($colors, primary); // 输出 #3498db
}

.secondary-color {
  color: map-get($colors, secondary); // 输出 #2ecc71
}

编译后的CSS代码：

.primary-color {
  color: #3498db;
}

.secondary-color {
  color: #2ecc71;
}

映射函数

SCSS提供了一组函数来操作映射，包括获取映射长度、合并映射、添加和删除键值对等。

示例：映射函数

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

$more-colors: map-merge($colors, (warning: #f1c40f)); // 合并映射

.all-colors {
  @each $name, $color in $more-colors {
    .color-#{$name} {
      color: $color;
    }
  }
}

编译后的CSS代码：

.color-primary {
  color: #3498db;
}

.color-secondary {
  color: #2ecc71;
}

.color-danger {
  color: #e74c3c;
}

.color-warning {
  color: #f1c40f;
}

嵌套映射

映射可以嵌套，以存储更复杂的样式数据。

示例：嵌套映射

$theme: (
  colors: (
    primary: #3498db,
    secondary: #2ecc71
  ),
  fonts: (
    base: Helvetica, sans-serif,
    heading: Georgia, serif
  )
);

body {
  font-family: map-get(map-get($theme, fonts), base); // 输出 Helvetica, sans-serif
  background-color: map-get(map-get($theme, colors), primary); // 输出 #3498db
}

编译后的CSS代码：

body {
  font-family: Helvetica, sans-serif;
  background-color: #3498db;
}

实际应用示例

为了更好地理解这些高级变量和数据结构的实际应用，我们来看一个完整的示例，展示如何结合使用列表和映射来编写样式代码。

项目结构

scss/
└── style.scss

style.scss

// 定义变量
$spacing: 10px;
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);
$font-sizes: 12px 14px 16px 18px;

// 使用映射
body {
  font-family: Helvetica, sans-serif;
  background-color: map-get($colors, primary);
  color: #fff;
}

// 使用列表
@each $size in $font-sizes {
  .text-size-#{$size} {
    font-size: $size;
  }
}

// 嵌套映射和列表
$theme: (
  colors: $colors,
  fonts: (
    base: Helvetica, sans-serif,
    heading: Georgia, serif
  ),
  sizes: $font-sizes
);

header {
  font-family: map-get(map-get($theme, fonts), heading);
  background-color: map-get(map-get($theme, colors), secondary);
  padding: $spacing;
}

@each $size in map-get($theme, sizes) {
  .header-text-size-#{$size} {
    font-size: $size;
  }
}

.button {
  @each $name, $color in map-get($theme, colors) {
    &-#{$name} {
      background-color: $color;
      color: #fff;
      padding: $spacing;
      border: none;
      border-radius: 5px;

      &:hover {
        background-color: darken($color, 10%);
      }
    }
  }
}

编译SCSS

在项目目录下运行以下命令，将SCSS文件编译为CSS文件：

sass scss/style.scss css/style.css

生成的 style.css 文件内容如下：

body {
  font-family: Helvetica, sans-serif;
  background-color: #3498db;
  color: #fff;
}

.text-size-12px {
  font-size: 12px;
}

.text-size-14px {
  font-size: 14px;
}

.text-size-16px {
  font-size: 16px;
}

.text-size-18px {
  font-size: 18px;
}

header {
  font-family: Georgia, serif;
  background-color: #2ecc71;
  padding: 10px;
}

.header-text-size-12px {
  font-size: 12px;
}

.header-text-size-14px {
  font-size: 14px;
}

.header-text-size-16px {
  font-size: 16px;
}

.header-text-size-18px {
  font-size: 18px;
}

.button-primary {
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.button-primary:hover {
  background-color: #2980b9;
}

.button-secondary {
  background-color: #2ecc71;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.button-secondary:hover {
  background-color: #27ae60;
}

.button-danger {
  background-color: #e74c3c;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.button-danger:hover {
  background-color: #c0392b;
}

结论

通过本文的讲解，你应该已经掌握了SCSS中的高级变量和数据结构，包括列表（List）和映射（Map）。我们详细介绍了列表和映射的定义和使用、访问元素的方法、相关函数以及嵌套使用的技巧，通过实际应用示例展示了如何结合使用这些数据结构来编写灵活和高效的样式代码。

这些就是关于【SCSS进阶】高级变量和数据结构（列表、映射）的详细介绍。
这里是爪磕，感谢您的到来与关注，我们将持续为您带来优质的文章。