1

Tengo algunos items que deseo dimencionar con cunter.

body {
  
  counter-reset: properti;
}

li::after {
  counter-increment: properti;
  content: counter(properti) ;
}

li{
  background: red;
  width: calc(25% * counter(properti));
}
<ul>
  
  <li> texto: </li>
  <li> texto: </li>
  <li> texto: </li>
  <li> texto: </li>


</ul>

Se que se puede hacer esto porque cal hace cálculos con enteros

3
  • 1
    En una expresión calc sólo puede haber literales y otras expresiones calc. No se puede usar counter() que, de hecho, devuelve texto, no un número. Has puesto en las etiquetas sass , ¿te valdría una solución hecha en SCSS? Commented el 2 dic. 2019 a las 23:03
  • Si estoy codificando todo en SASS, En w3schools vi los valores que soportaban y que retornaban respectivamente. Si hay otra solución en sass estaría perfecto. Hasta el momento solo lo he podido resolver con javascript Commented el 3 dic. 2019 a las 16:31
  • ¿Y la etiqueta stylus?
    – user7176
    Commented el 5 dic. 2019 a las 12:31

1 respuesta 1

1

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);
}
2
  • El problema de hacerlo así es que no puedo hacerlo dinamicamente. Es decir en este caso son 4 items, pero podrían ser menos o mas. Esto ya lo resolví con javascript pero quería que esto quedara en la hoja de estilos. Commented el 5 dic. 2019 a las 16:29
  • este numero lo obtengo de una base de datos, después de que se compilo sass. Commented el 5 dic. 2019 a las 16:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.