不同的样式取决于复选框的数量是奇数还是偶数

Question

我正在使用CSS和SASS运行测试并且有一系列重复和嵌套多次的选择器,我想简化我的代码但不知道如何做(它应该是可能的,但我可以弄明白了.

主要的想法是我有很多单选按钮(84,42组,2个同名),并希望根据检查的单选按钮的数量是奇数还是偶数,为元素添加样式.

为此,我现在正在&SASS中使用生成当前选择器,并将其与兄弟选择器嵌套~(顺序并不重要,只是检查无线电的数量).这是SASS代码的简化版本(只有10组):

.rd:checked {
  & ~ &,
  & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & {
    ~ #oddeven {
      background: red; // red if even
    }
  }
  &,
  & ~ & ~ &,
  & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & {
    ~ #oddeven {
      background: green; // green if odd 
    }
  }
}

这会生成以下CSS代码(我添加HTML以便我想要的效果可见):

.rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.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 ~ #oddeven,
.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 ~ #oddeven,
.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 ~ #oddeven,
.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 ~ #oddeven {
  background: red;
}

.rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.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 ~ #oddeven,
.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 ~ #oddeven,
.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 ~ #oddeven,
.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 ~ #oddeven {
  background: green;
}

#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">
  RED background if even number of checked radios (or nothing).<br/>
  GREEN background if odd number of checked radios.
</div>

---

有没有办法减少/简化SASS代码,使其更干净？它现在的方式,很容易出错,添加新规则很复杂(对于新的单选按钮组).

或者,是否有可能以更好的方式做到这一点？(可能使用mixin或以某种方式实际嵌套).而不是使用&和~,我尝试使用CSS计数器,但我没有找到一种方法来添加样式取决于计数器的值.

注意:我不想使用JavaScript,只需HTML和CSS/SASS来生成规则.

Answer 1

您可以& ~ & ...使用for循环、字符串插值和连接来生成这些选择器：

// function to repeat string:
@function r($string, $times) { 
  $result: "";
  @if $times >= 1 {
    @for $i from 1 through $times {
      $result: $result + $string;
    }
  }
  @return $result;
}

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

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

我知道它不会产生与你的完全相同的 CSS，但是通过更多的操作也可以实现。

工作演示：

// function to repeat string:
@function r($string, $times) { 
  $result: "";
  @if $times >= 1 {
    @for $i from 1 through $times {
      $result: $result + $string;
    }
  }
  @return $result;
}

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

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

.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;
}