sass遍历map空值_Sass Map简介：用法和示例

sass遍历map空值

对于可扩展的前端，Sass Maps是一件幸事。 从模块的逻辑中提取配置是一种很好的结构化方法。 让我向您解释为什么我认为Sass Maps是Sass 3.3中的最佳功能。

萨斯3.3

Sass 3.3已经存在了一段时间，每个人都可以接触到它，但是它的许多实际功能对于许多开发人员仍然是陌生的。 Sass的新版本为我们带来了一个名为map的新数据类型。 映射包含键/值对的集合，并帮助我们为简化的代码库创建较小的配置区域。

如何使用Sass地图

与我们在一起时，我们将介绍使用Sass Maps的基础知识，然后在以后的内容中，我们将介绍一些用例。

生成地图

这是Sassy Map语法的快速概述。 以变​​量名（在这种情况下$map ）开头，然后输入一些带有值的键，并用大括号括起来，并用逗号分隔：

$map: (
    key: value,
    nextkey: nextvalue
);

如何获得价值

在某个时候存储了多个键/值对后，您将需要检索该信息。 如果您需要查找键的值，请使用map-get()函数。 我们将向其传递两个参数：地图名称和键。

.element:before {
    content: map-get($map, key);
}

编译后，输出将如下所示：

.element:before {
    content: value;
}

如何检查钥匙是否可用

强烈建议您在Sass开发过程中使用可靠的错误处理 。 为此，Sass为我们提供了map-has-key()函数。 该帮助程序查看密钥是否存在，如果不存在，则提供另一个输出来警告开发人员。

看看Hugo Giraudel撰写的《 Sass中的错误处理简介》 ，这是一种很棒的错误处理方法。

$map: (
    key: value,
    nextkey: nextvalue
);

.element {
  @if map-has-key($map, key) {
    content: ’Map has this key.’;
  } @else {
    content: ’Map has not this key.’;
  }
}

结果：

.element {
  content: ’Map has this key.’;
}

如何将地图合并在一起

奖励时间：Sass允许我们将两个或多个地图合并在一起。 现在您已经掌握了这一点，因此请看一下如何使用map-merge()函数的示例：

$colors: (
  light: #ccc,
  dark: #000
);

$brand-colors: (
  main: red,
  alternative: blue
);

// Merge maps
$merged: map-merge($colors, $brand-colors);

.element {
  content: map-get($merged, alternative);
}

结果：

.element {
  content: blue;
}

实际用例

我们已经介绍了方法 ，现在让我们看看在哪里 。

1.如何遍历地图并生成类

如果没有随附的功能，地图也会很有用。 例如，您可以遍历地图，用期望的值定义参数，然后添加Sass Map的名称。 通过这样做，可以使用不同类型的值。

在此示例中，我将输出类以显示图标。 我将图标的名称作为键，保留用于存储实际content的值（然后通过伪元素添加该值）。

注意 ：在实际场景中，我们将首先声明一些基本样式，但这超出了本教程的范围。

/* Define the Sassy Map called $icons */
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);

/* For each key in the map, created an own class */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}

输出说明一切：

/* For each key in the map, created an own class */
.icon--checkmark {
  content: "a";
}

.icon--plus {
  content: "b";
}

.icon--minus {
  content: "c";
}

这是输出图标类负载的一种非常有效的方法。 还有更多的用例，让我们来看一些。

2.多个值可带来更多惊喜

继续前进，可以给一个键提供多个值。 这是通过使用剪辑并使用逗号分隔符输入多个值来完成的。 例如，这对于传递模块变体的样式可能非常有用。

在这里，我将为一系列按钮设置样式。 每个键的第一个值用于background-color ，第二个值用于font-color 。

然后，我用期望的对象$colors遍历键。 我使用nth($colors, 1)获得了该对象中nth($colors, 1)一个键的值（从对象的名称开始，然后是所需值的位置）。 如果需要第二个值，则输入2 。

// _m-buttons.scss
$buttons: (
  error: (#d82d2d, #666),
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);

.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
  
  @each $name, $colors in $buttons {
    $bgcolor: nth($colors, 1);
    $fontcolor: nth($colors, 2);
    
    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }  
  }
}

输出：

.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
}

.m-button--error {
  background-color: #d82d2d;
  color: #666;
}

.m-button--success {
  background-color: #52bf4a;
  color: #fff;
}

.m-button--warning {
  background-color: #c23435;
  color: #fff;
}

3.处理层（z索引）

我不知道某个前端开发人员在某个时候没有与z-index搏斗 。 如果您需要在项目中的多个位置使用z-index ，通常会因缺少概述而产生问题。 萨斯地图可以帮助我们。

让我们从$layer作为地图开始。 键应在逻辑上命名，以便您知道哪个值对应哪个元素-可能是offcanvas ， lightbox ， dropdown等。

// _config.scss
$layer: (
  offcanvas: 1,
  lightbox: 500,
  dropdown: 10,
  tooltip: 15
);

// _m-lightboxes.scss
@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);  
  }
  
  @warn "The key #{$name} is not in the map ’$layer’";
  @return null;
};

.m-lightbox {
  z-index: layer(lightbox);
}

在这里，我编写了一个函数来获取特定键的值，但是为什么要这样做呢？ 谢天谢地，答案很简单：比每次编写map-get()都要快。 另一个积极的方面是，您可以创建错误处理，并向开发人员提供一些反馈，说明什么都没发生。

这是输出：

.m-lightbox {
  z-index: 500;
}

4.在项目中为字体使用基本样式

每个项目都有自己的配置文件。 全球使用的基础知识。 例如，在我的项目中，我为字体属性定义了一些值：font-color，替代font-color，font-family或font-size。 我曾经为每个属性创建一个变量，但映射会更好。

这是一个简单的示例，从旧的解决方案开始：

$base-font-color: #666;
$base-font-family: Arial, Helvetica, Sans-Serif;
$base-font-size: 16px;
$base-line-height: 1.4;

然后使用Sass映射的新解决方案：

// _config.scss
$font: (
  color: #666,
  family: (Arial, Helvetica),
  size: 16px,
  line-height: 1.4
);

// _presets.scss
body {
  color: map-get($font, color);
  font-family: map-get($font, family);
  font-size: map-get($font, size);
  line-height: map-get($font, line-height);
}

5.断点<3

我喜欢这个用例。 在整个项目中都有一个断点区域真是太好了。 因此，就像有关使用z-index进行处理的部分一样，您对所有使用的断点都有一个概述。 如果在此更改值，则将更改整个项目的行为。 太棒了

因此，让我们从名为$breakpoints的地图开始。

我们的目标是使用具有隐式名称的断点，而不是元素中的硬像素值。 因此，我们需要一个mixin，它将输出指定名称的值。 我调用了mixin respond-to并传递$breakpoint作为参数。 使用$value可以得到预期断点的值，然后将其放在媒体查询中。

// Map with much breakpoints
$breakpoints: (
    small: 320px,
    medium: 600px,
    large: 768px
);

// Respond-To Mixin
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        $value: map-get($breakpoints, $breakpoint);
        
        @media screen and (min-width: $value) {
            @content;
        }
    }
    
    @warn "Unknown `#{$breakpoint}` in $breakpoints";
}

例：

// Sass
.m-tabs {
    background-color: #f2f2f2;
    
    @include respond-to(medium) {
        background-color: #666;
    }
}

// Output
.m-tabs {
    background-color: #f2f2f2;
}
@media screen and (min-width: 600px) {
    background-color: #666;
}

这个用例是我的最爱之一！

6.颜色的高级用法

现在事情变得有些棘手了。 让我们看一下嵌套的贴图-对于具有多种色调的配色方案来说真是棒极了。

在这种情况下，我们的Sass贴图的名称$colorscheme ，它具有带有键和值的对象。 该项目具有不同的灰色调，但是我们不想为每个变量声明一个变量。 因此，我们添加一个对象gray ，添加剪报，然后添加具有值的键。

从这里开始像这样的地图：

// Scheme of colors
$colorscheme: (
  gray: (
    base: #ccc,
    light: #f2f2f2,
    dark: #666
  ),
  brown: (
    base: #ab906b,
    light: #ecdac3,
    dark: #5e421c
  )
);

现在，让我们添加函数setcolor ，以更短的方式获得我们选择的颜色。 第一个期望值是Sass映射的对象（ $scheme ）-在此示例中，它可以是gray或brown 。 第二个参数是您想要的颜色（ $tone ）-此默认值是键base 。

// Our function for shorter usage of map-get();
@function setcolor($scheme, $tone: base) {
    @return map-get(map-get($colorscheme, $scheme), $tone);
}

最后，这是一个如何使用它以及如何从嵌套地图中获得不同颜色的示例。 它比您想象的要容易（也许）！

// Sass
.element {
  color: setcolor(brown);
}
.element--light {
  color: setcolor(brown, light);
}

// Output
.element {
    color: #ab906b;
}
.element--light {
    color: #ecdac3;
}

您已经完成了挑战。 现在，您可以创建一个调色板，而不必为每种颜色的变量添加太多变量而使代码膨胀。

对于这项技术，我受到汤姆·戴维斯 （ Tom Davies ）的启发，我建议您阅读他关于此事的文章。

与课程主题化

现在适合高级Sass用户。 在项目中，通常需要使用相同的代码库创建不同种类的主题。 因此，建议在文档顶部设置一个主题类以应用特定外观。 我们需要一个可以处理主题名称并为模块设置不同样式的对象。

定义主题

从Sass贴图开始，并为您的项目全局定义主题。 值是名称和类，必须将其附加到<body>元素。 在此示例中，我创建了具有两个变体的$themes地图： theme-light和theme-dark 。

// _config.scss
$themes: (
  theme1: theme-light,
  theme2: theme-dark
);

获得价值（捷径）

现在，我们需要一个函数来快速获取模块的值。 它是一个简短的帮手，需要三个参数。 这些是：

• $map ：定义所有值都来自的地图的名称。
• $object ：在这种情况下，主题的键。
• $style ：所需$style的属性。

// _functions.scss
@function setStyle($map, $object, $style) {
  @if map-has-key($map, $object) {
    @return map-get(map-get($map, $object), $style);
  }
  @warn "The key ´#{$object} is not available in the map.";
  @return null;
}

构建模块

现在创建一个名为$config的新Sass Map。 每个主题都有一个对象，并且名称必须与您在$themes定义的键相同：否则，将出现错误。

// _m-buttons.scss
// 1.Config
$config: (
  theme1: (
    background: #f2f2f2,
    color: #000
  ),
  theme2: (
    background: #666,
    color: #fff
  )
);

循环浏览主题

最终，该部分带有一点魔力。 我们从.m-button类的模块开始，然后要在每个主题中创建不同的外观。 因此，我们将@each和$key和$value用作从Map $themes获取的期望值。 现在，Sass遍历地图中的键并为每个主题创建一些内容。

在本节的开头，我提到有必要在每个映射中使用相同的键（ $themes和$config ）。 因此，我们必须检查map $ config是否具有map $themes的键，因此请使用map-has-key()函数。 如果密钥可用，请执行以下操作，否则抛出错误以通知开发人员。

// _m-buttons.scss
// 2.Base
.m-button {
  @each $key, $value in $themes {
    @if map-has-key($config, $key) {
      .#{$value} & {
        background: setStyle($config, $key, background);
        color: setStyle($config, $key, color);
      }
    } @else {
      @warn "The key ´#{$key} isn’t defined in the map $config´"
    }
  }
}

编写完所有代码之后，让我们看一下结果。 配置区域与模块的逻辑分离是极好的。

.theme-light .m-button {
  background: #f2f2f2;
  color: #000;
}
.theme-dark .m-button {
  background: #666;
  color: #fff;
}

最后是时候自己尝试一下了。 也许这种解决方案对您不起作用，您需要另一种解决方案，但是总的来说，我希望它可以帮助您很好地维护代码。 您可以在Codepen上使用以下示例：

最后的想法

在我眼里，Sass Maps是Sass 3.3中引入的最佳功能。 就我个人而言，我认为它们是使您的基础更好的结构并创建较小的配置区域的好方法。 Sass映射使在不影响整个代码库逻辑的情况下更易于处理和更改值。 从今天开始使用它们，您的同事将不胜感激！

如果您已经在使用Sass映射，请告诉我们如何在项目中使用它们！

翻译自: https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184

sass遍历map空值