0
場景:Ruby v2.2.4p230,Sass v3.4.22,Windows 10 v1511。請參閱下面的代碼片段。也出現使用http://www.sassmeister.com/,所以它似乎不是本地計算機問題。SASS在插值某些映射鍵時評估E符號
問題:編譯時,某些鍵會插入類似的值,但似乎已損壞,並插入大量的零。
這些是有問題的,內插相關聯的值的樣本的密鑰值:
- 270e00 => 270
- 270e0f => 270F
- 270e10 => 27000億
- 270e90 => 2700000000000000000000000000000000000000000000000000000000000000000000000000000000000
- 270e9e => 270000000000e
- 270e9f => 270000000000f
通過嘗試其他的值,這個問題似乎發生在一個或多個數字字符鍵啓動後面跟着一個字符「E」,然後一個或多個數字字符。之後的任何字母都會正常打印。所有其他值都是內插的,沒有問題。
基於此,Sass似乎正在評估以#e#開頭的密鑰,就像它在E notation中一樣。
$imagePath: '../img/';
$images: (
\t contact: (
\t \t elements: (email, phone, linkedin, twitter),
\t \t colors: (
\t \t \t fff: (states: 1, sizes: (22, 24,26)),
\t \t \t 782bbb: (states: 2, sizes: 26),
\t \t)
\t),
\t page-front: (
\t \t elements: (cloud, computer, phone, printer, server),
\t \t colors: (
\t \t \t 270dff: (states: 1, sizes: 64),
\t \t \t 270e00: (states: 1, sizes: 64),
\t \t \t 270e0f: (states: 1, sizes: 64),
\t \t \t 270e10: (states: 1, sizes: 64),
\t \t \t 270e90: (states: 1, sizes: 64),
\t \t \t 270e9e: (states: 1, sizes: 64),
\t \t \t 270e9f: (states: 1, sizes: 64),
\t \t \t 270ea0: (states: 1, sizes: 64),
\t \t \t 270ef0: (states: 1, sizes: 64),
\t \t \t 270f00: (states: 1, sizes: 64),
\t \t \t e9aea0: (states: 1, sizes: 64)
\t \t)
\t),
);
@each $type, $type-values in $images {
\t @each $color, $color-values in map-get($type-values, colors) {
\t \t @each $size in map-get($color-values, sizes) {
\t \t \t .icon-type-#{$type} {
\t \t \t \t &.icon-color-#{$color}, .icon-color-#{$color} {
\t \t \t \t \t &.icon-size-#{$size}, .icon-size-#{$size} {
\t \t \t \t \t \t &.icon, .icon {
\t \t \t \t \t \t \t .image {
\t \t \t \t \t \t \t \t height: #{$size}px;
\t \t \t \t \t \t \t \t background-image: url(#{$imagePath}#{$type}-#{$color}-#{$size}.png);
\t \t \t \t \t \t \t \t &.alt-hidden {
\t \t \t \t \t \t \t \t \t width: #{$size}px;
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t }
\t \t $elements: map-get($type-values, elements);
\t \t @for $i from 1 through length($elements) {
\t \t \t $posY: (($i - 1)/(length($elements) - 1))*100%;
\t \t \t .icon-type-#{$type} {
\t \t \t \t &.icon-color-#{$color}, .icon-color-#{$color} {
\t \t \t \t \t &.icon, .icon {
\t \t \t \t \t \t &.#{nth($elements, $i)} {
\t \t \t \t \t \t \t .image { background-position: 0 $posY; }
\t \t \t \t \t \t \t @if map-get($color-values, states) > 1 {
\t \t \t \t \t \t \t \t &:active {
\t \t \t \t \t \t \t \t \t .image { background-position: 100% $posY; }
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t $posX: 100%;
\t \t \t \t \t \t \t \t @if map-get($color-values, states) == 3 { $posX: 50%; }
\t \t \t \t \t \t \t \t &:hover, &:focus{
\t \t \t \t \t \t \t \t \t .image { background-position: $posX $posY; }
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t }
\t }
}