Como he puesto en un comentario, dentro de la expresión de calc
sólo puede haber literales y otras expresiones calc
. No se puede usar counter()
que, de hecho, devuelve texto, no un número. Y esto no parece que vaya a cambiar ya que los contadores suponen bastante sobrecarga para el navegador y no se recomienda su uso.
Una solución mejor es que el compilador de sass sea quien haga los cálculos.
li {
background: red;
@for $i from 1 through 4 {
&:nth-child(4n + #{$i}) {
width: (25% * $i);
&::after {
content: "#{$i}";
}
}
}
}
Compilado queda:
li {
background: red;
}
li:nth-child(4n+1) {
width: 25%;
}
li:nth-child(4n+1)::after {
content: "1";
}
li:nth-child(4n+2) {
width: 50%;
}
li:nth-child(4n+2)::after {
content: "2";
}
li:nth-child(4n+3) {
width: 75%;
}
li:nth-child(4n+3)::after {
content: "3";
}
li:nth-child(4n+4) {
width: 100%;
}
li:nth-child(4n+4)::after {
content: "4";
}
<ul>
<li> texto: </li>
<li> texto: </li>
<li> texto: </li>
<li> texto: </li>
</ul>
Si se quiere, se puede generalizar para cualquier número de escalones que nos haga falta:
@mixin escalera($n: 4) {
@for $i from 1 through $n {
&:nth-child(#{$n}n + #{$i}) {
width: (100% / $n * $i);
&::after {
content: "#{$i}";
}
}
}
}
li {
background: red;
@include escalera(4);
}
calc
sólo puede haber literales y otras expresiones calc. No se puede usarcounter()
que, de hecho, devuelve texto, no un número. Has puesto en las etiquetas sass , ¿te valdría una solución hecha en SCSS?stylus
?