Szenario: Ruby v2.2.4p230, Sass v3.4.22, Windows 10 v1511. Siehe Schnipsel unten. Tritt auch unter Verwendung von http://www.sassmeister.com/ auf, so dass es sich nicht um ein lokales Computerproblem handelt.SASS wertet E-Notation aus, wenn bestimmte Kartenschlüssel interpoliert werden
Problem: Wenn kompiliert, werden bestimmte Schlüssel mit ähnlichen Werten interpoliert, scheinen aber korrupt zu sein, mit zahlreichen Nullen eingefügt.
Dies sind Beispielschlüsselwerte, die problematisch und der zugehörige Wert sind, der interpoliert wird:
- 270e00 => 270
- 270e0f => 270F
- 270e10 => 2700000000000
- 270e90 => 270000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
- 270e9e => 270000000000e
- 270e9f => 270000000000f
Durch andere Werte versuchen, das Problem scheint tritt auf, wenn der Schlüssel beginnt mit einem oder mehreren numerischen Zeichen durch das Zeichen ‚e‘ und dann eine oder mehrere numerische Zeichen. Alle Buchstaben danach werden normal gedruckt. Alle anderen Werte werden ohne Problem interpoliert.
Basierend darauf scheint es, dass Sass einen Schlüssel bewertet, der mit # e # beginnt, als ob er in E notation wäre.
$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 }
}