2

Estoy haciendo pruebas con CSS y SASS y me encuentro con que tengo una serie de selectores repetidos y anidados muchas veces y no sé cómo simplificarlos o mejorarlos (debe ser posible porque ahora mismo es un poco caótico, aunque no estoy seguro cómo).

La idea es que, tengo un número considerable de radio buttons (84, en 42 grupos de 2 con mismo name) y quiero dar estilo a un elemento dependiendo de si el número de radio buttons marcados es par o impar.

Para ello, hago uso del & en SASS que generará el selector hasta el momento, para "anidar" con el selector hermano ~ (el orden no me importa, sólo el número de checkboxes marcados). Éste es mi código SASS (reducido a sólo 10 grupos de 2):

.rd:checked {
  & ~ &,
  & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & {
    ~ #parimpar {
      background: red; // rojo si es par
    }
  }
  &,
  & ~ & ~ &,
  & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & {
    ~ #parimpar {
      background: green; // verde si es impar
    }
  }
}

Que me genera el siguiente código (añado HTML para que se vea el efecto que quiero):

.rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar {
  background: red;
}

.rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #parimpar {
  background: green;
}

#parimpar {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}
<input type="radio" class="rd" name="rd0" />
<input type="radio" class="rd" name="rd0" /><br/>
<input type="radio" class="rd" name="rd1" />
<input type="radio" class="rd" name="rd1" /><br/>
<input type="radio" class="rd" name="rd2" />
<input type="radio" class="rd" name="rd2" /><br/>
<input type="radio" class="rd" name="rd3" />
<input type="radio" class="rd" name="rd3" /><br/>
<input type="radio" class="rd" name="rd4" />
<input type="radio" class="rd" name="rd4" /><br/>
<input type="radio" class="rd" name="rd5" />
<input type="radio" class="rd" name="rd5" /><br/>
<input type="radio" class="rd" name="rd6" />
<input type="radio" class="rd" name="rd6" /><br/>
<input type="radio" class="rd" name="rd7" />
<input type="radio" class="rd" name="rd7" /><br/>
<input type="radio" class="rd" name="rd8" />
<input type="radio" class="rd" name="rd8" /><br/>
<input type="radio" class="rd" name="rd9" />
<input type="radio" class="rd" name="rd9" />

<div id="parimpar">
  Fondo ROJO si el número de radios marcado es par (o no hay nada marcado).<br/>
  Fondo VERDE si el número de radios marcado es impar.
</div>


¿Hay alguna manera de reducir el código SASS para que se vea más limpio? Tal y como está ahora es fácil cometer un error y es complejo añadir más reglas.

Alternativamente, ¿sería posible hacerlo de una mejor manera? (con un mixin o algo). En lugar de usar el & y ~ probé usando contadores de CSS, pero no encontré una manera de dar estilo a un elemento dependiendo del valor del contador.

NOTA: No quiero usar JavaScript, sólo HTML y CSS/SASS para generar las reglas.

2
  • para reducir tu lógica usaría js, si te acomoda eso me comentas para darte una idea saludos
    – Derleguan
    el 12 ago. 2018 a las 15:03
  • @Derleguan no quiero usar JS porque es para un proyecto con solo HTML y CSS (sin JavaScript de ningún tipo). Sé que se puede añadir algo de lógica con SASS y estaría buscando algo más como eso.
    – Alvaro Montoro
    el 12 ago. 2018 a las 15:09

1 respuesta 1

2

Traducción de la respuesta de juzraai en un cross-post en el sitio en inglés

Puedes generar esos selectores & ~ & ... usando un bucle for, interpolación de cadenas y concatenación:

// función para repetir una cadena:
@function r($string, $times) { 
  $result: "";
  @if $times >= 1 {
    @for $i from 1 through $times {
      $result: $result + $string;
    }
  }
  @return $result;
}

// generar reglas:
@for $n from 1 through 10 {
  .rd:checked {
    $s: r(' ~ &', $n - 1);
    $s: '&' + $s;
    @if ($n % 2 == 0) {
      #{$s} ~ #parimpar {
        background: red;
      }
    } @elseif ($n % 2 == 1) {
      #{$s} ~ #parimpar {
        background: green;
      }
    }
  }
}

#parimpar {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}

No produce exactamente el mismo CSS que tenías, pero con algunos cambios eso también se puede conseguir.

Demo funcionando:

.rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

#oddeven {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}
<input type="radio" class="rd" name="rd0" />
<input type="radio" class="rd" name="rd0" /><br/>
<input type="radio" class="rd" name="rd1" />
<input type="radio" class="rd" name="rd1" /><br/>
<input type="radio" class="rd" name="rd2" />
<input type="radio" class="rd" name="rd2" /><br/>
<input type="radio" class="rd" name="rd3" />
<input type="radio" class="rd" name="rd3" /><br/>
<input type="radio" class="rd" name="rd4" />
<input type="radio" class="rd" name="rd4" /><br/>
<input type="radio" class="rd" name="rd5" />
<input type="radio" class="rd" name="rd5" /><br/>
<input type="radio" class="rd" name="rd6" />
<input type="radio" class="rd" name="rd6" /><br/>
<input type="radio" class="rd" name="rd7" />
<input type="radio" class="rd" name="rd7" /><br/>
<input type="radio" class="rd" name="rd8" />
<input type="radio" class="rd" name="rd8" /><br/>
<input type="radio" class="rd" name="rd9" />
<input type="radio" class="rd" name="rd9" />

<div id="oddeven">
  Fondo ROJO si el número de radios marcado es par (o no hay nada marcado).<br/>
  Fondo VERDE si el número de radios marcado es impar.
</div>

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.