当插入某些地图键时，SASS会评估E表示法

Question

场景：Ruby v2.2.4p230，Sass v3.4.22，Windows 10 v1511。请参阅下面的代码段。也使用http://www.sassmeister.com/进行，因此它似乎不是本地计算机问题。

问题：编译时，某些键被内插的值相似但看起来已损坏，插入了大量的零。

这些是有问题的示例键值以及插值的关联值：

• 270e00 =＆gt; 270
• 270e0f =＆gt; 270F
• 270e10 =＆gt; 27000亿
• 270e90 =＆gt; 270000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
• 270e9e =＆gt; 270000000000e
• 270e9f =＆gt; 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

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