Miejsca dziesiętne łamią się w Sass [duplikat] - sass, compass-sass

Próba utworzenia niektórych klas w celu zdefiniowania krycia za pomocą następującego kodu:

$i : 0;
@while $i <= 1 {
.opacity-#{$i*100} {
opacity: $i !important;
}
$i : $i + 0.1;
}

Ale pojawia się następujący błąd:

Niepoprawny CSS po „.opacity-30.”: Oczekiwana nazwa klasy, to „0”

Wygląda na to, że dodaje kropkę po chwili ... nie jestem pewien, co może być przyczyną.

Korzystanie z Sass 3.4.14

Korzystanie z kompasu

Jakieś pomysły?

Dzięki!

Odpowiedzi:

Wygląda na to, że musisz zaokrąglić liczbę w nazwie klasy: jeśli drukujesz /* #{$i*100} */ kompilator obliczy oba 30.0, 90.0 i 100.0

Więc możesz użyć round() funkcja (odniesienie), aby pozbyć się miejsc po przecinku

$i : 0;
@while $i <= 1 {

/* #{$i*100} */
.opacity-#{round($i*100)} {
opacity: $i !important;
}

$i : $i + 0.1;
}

Wynikowa wydajność (testowana na sassmeister) to

/* 0 */
.opacity-0 { opacity: 0 !important; }

/* 10 */
.opacity-10 { opacity: 0.1 !important; }

/* 20 */
.opacity-20 { opacity: 0.2 !important; }

/* 30.0 */
.opacity-30 { opacity: 0.3 !important; }

/* 40 */
.opacity-40 { opacity: 0.4 !important; }

/* 50 */
.opacity-50 { opacity: 0.5 !important; }

/* 60 */
.opacity-60 { opacity: 0.6 !important; }

/* 70 */
.opacity-70 { opacity: 0.7 !important; }

/* 80 */
.opacity-80 { opacity: 0.8 !important; }

/* 90.0 */
.opacity-90 { opacity: 0.9 !important; }

/* 100.0 */
.opacity-100 { opacity: 1.0 !important; }