抽象CSS

有没有任何方法可以制作css的抽象规则，其中此类代码（sass）：

可以变成这样：

#cottage-image-gallery input:nth-of-type(n):checked ~ label:nth-of-type(n) img
  position: fixed

<input id="slide1" type="radio" name="cottage-image" data="1">
<input id="slide2" type="radio" name="cottage-image">
<input id="slide3" type="radio" name="cottage-image">
<input id="slide4" type="radio" name="cottage-image">
<input id="slide5" type="radio" name="cottage-image">
<input id="slide6" type="radio" name="cottage-image">
<input id="slide7" type="radio" name="cottage-image">
<input id="slide8" type="radio" name="cottage-image">
<input id="slide0" type="radio" name="cottage-image" checked>
<label for="slide1"><img src="http://calhaugrande.com/img/sol/1.jpg"></label>
<label for="slide2"><img src="http://calhaugrande.com/img/sol/2.jpg"></label>
<label for="slide3"><img src="http://calhaugrande.com/img/sol/3.jpg"></label>
<label for="slide4"><img src="http://calhaugrande.com/img/sol/4.jpg"></label>
<label for="slide5"><img src="http://calhaugrande.com/img/sol/5.jpg"></label>
<label for="slide6"><img src="http://calhaugrande.com/img/sol/6.jpg"></label>
<label for="slide7"><img src="http://calhaugrande.com/img/sol/7.jpg"></label>
<label for="slide8"><img src="http://calhaugrande.com/img/sol/8.jpg"></label>
<label for="slide0"></label>

当n等于1时，第二个变量也是如此；当n等于2时，第二个变量变为2；等等

我不使用相邻选择器“+”的原因是，我需要将输入置于同一父项下，但它们彼此相邻

致意

示例：

在Sass中，可以使用

@for $i from 1 through 8
  #cottage-image-gallery input:nth-of-type(#{$i}):checked ~ label:nth-of-type(#{$i}) img
    position: fixed

输出如下：

#cottage-image-gallery input:nth-of-type(1):checked ~ label:nth-of-type(1) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(2):checked ~ label:nth-of-type(2) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(3):checked ~ label:nth-of-type(3) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(4):checked ~ label:nth-of-type(4) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(5):checked ~ label:nth-of-type(5) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(6):checked ~ label:nth-of-type(6) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(7):checked ~ label:nth-of-type(7) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(8):checked ~ label:nth-of-type(8) img {
  position: fixed;
}

但是，如果HTML是这样的：

#cottage-image-gallery input:nth-of-type(n):checked ~ label:nth-of-type(n) img
  position: fixed

<input id="slide1" type="radio" name="cottage-image" data="1">
<input id="slide2" type="radio" name="cottage-image">
<input id="slide3" type="radio" name="cottage-image">
<input id="slide4" type="radio" name="cottage-image">
<input id="slide5" type="radio" name="cottage-image">
<input id="slide6" type="radio" name="cottage-image">
<input id="slide7" type="radio" name="cottage-image">
<input id="slide8" type="radio" name="cottage-image">
<input id="slide0" type="radio" name="cottage-image" checked>
<label for="slide1"><img src="http://calhaugrande.com/img/sol/1.jpg"></label>
<label for="slide2"><img src="http://calhaugrande.com/img/sol/2.jpg"></label>
<label for="slide3"><img src="http://calhaugrande.com/img/sol/3.jpg"></label>
<label for="slide4"><img src="http://calhaugrande.com/img/sol/4.jpg"></label>
<label for="slide5"><img src="http://calhaugrande.com/img/sol/5.jpg"></label>
<label for="slide6"><img src="http://calhaugrande.com/img/sol/6.jpg"></label>
<label for="slide7"><img src="http://calhaugrande.com/img/sol/7.jpg"></label>
<label for="slide8"><img src="http://calhaugrande.com/img/sol/8.jpg"></label>
<label for="slide0"></label>

---

但是不能在

：nth-child（）中使用属性选择器。也许在将来
 你想在sass中为此编写一个函数，还是希望纯CSS是“抽象的”？我的主要目标是剪切CSS输出中所有类似的重复代码。有什么想法吗？Thanks@Jos哦，我明白了。我很难只说出这个信息。你能在你的问题中发布一些HTML吗？@JoséGouveia我已经更新了答案。在看了你的笔之后，我觉得没有办法在CSS输出中做得更好。你所能做的就是缩短Sass。