css - 内插某些映射键时，SASS评估E表示法

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

问题：在编译时，某些键被插入具有相似但看起来已损坏的值，并插入了许多零。

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


270e00 => 270
270e0f => 270f
270e10 => 2700000000000
270e90 => 270000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
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; }
								}
							}
						}
					}
				}
			}
		}
	}
}

最佳答案

可以通过将密钥用单引号或双引号引起来解决此问题。