css - SASS 在插入某些映射键时评估 E 符号

Question

场景:Ruby v2.2.4p230、Sass v3.4.22、Windows 10 v1511。请参阅下面的片段。使用 http://www.sassmeister.com/ 也会发生, 所以它似乎不是本地机器问题。

问题:编译时，某些键被插入了相似但看起来损坏的值，插入了许多零。

这些是有问题的示例键值和插入的关联值:

• 270e00 => 270
• 270e0f => 270f
• 270e10 => 2700000000000
• 270e90 => 270000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
• 270e9e => 270000000000e
• 270e9f => 270000000000f

通过尝试其他值，当键以一个或多个数字字符开头，后跟字符“e”，然后是一个或多个数字字符时，问题似乎会发生。之后的任何字母都会正常打印。所有其他值都可以毫无问题地进行插值。

基于此，Sass 似乎正在评估以#e# 开头的键，就好像它在 E notation 中一样。 .

$imagePath: '../img/';
$images: (
	contact: (
		elements: (email, phone, linkedin, twitter),
		colors: (
			fff: (states: 1, sizes: (22, 24,26)),
			782bbb: (states: 2, sizes: 26),
		)
	),
	page-front: (
		elements: (cloud, computer, phone, printer, server),
		colors: (
			270dff: (states: 1, sizes: 64),
			270e00: (states: 1, sizes: 64),
			270e0f: (states: 1, sizes: 64),
			270e10: (states: 1, sizes: 64),
			270e90: (states: 1, sizes: 64),
			270e9e: (states: 1, sizes: 64),
			270e9f: (states: 1, sizes: 64),
			270ea0: (states: 1, sizes: 64),
			270ef0: (states: 1, sizes: 64),
			270f00: (states: 1, sizes: 64),
			e9aea0: (states: 1, sizes: 64)
		)
	),
);
@each $type, $type-values in $images {
	@each $color, $color-values in map-get($type-values, colors) {

		@each $size in map-get($color-values, sizes) {
			.icon-type-#{$type} {
				&.icon-color-#{$color}, .icon-color-#{$color} {
					&.icon-size-#{$size}, .icon-size-#{$size} {
						&.icon, .icon {
							.image {

								height: #{$size}px;
								background-image: url(#{$imagePath}#{$type}-#{$color}-#{$size}.png);

								&.alt-hidden {
									width: #{$size}px;
								}
							}
						}
					}
				}
			}
		}

		$elements: map-get($type-values, elements);

		@for $i from 1 through length($elements) {

			$posY: (($i - 1)/(length($elements) - 1))*100%;

			.icon-type-#{$type} {
				&.icon-color-#{$color}, .icon-color-#{$color} {
					&.icon, .icon {
						&.#{nth($elements, $i)} {

							.image { background-position: 0 $posY; }

							@if map-get($color-values, states) > 1 {

								&:active {
									.image { background-position: 100% $posY; }
								}

								$posX: 100%;

								@if map-get($color-values, states) == 3 { $posX: 50%; }

								&:hover, &:focus{
									.image { background-position: $posX $posY; }
								}
							}
						}
					}
				}
			}
		}
	}
}

Answer 1

可以通过将 key 括在单引号或双引号中来解决此问题。