css - 抽象 CSS

Question

是否有任何方法可以在这种代码(sass)中制定 css 的抽象规则:

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

可以变成这样:

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

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

我没有使用相邻选择器“+”的原因是我需要在同一个父级下输入但彼此靠近。

最好的问候

示例:https://codepen.io/s3m3nT3s/pen/rYBxLq

Answer 1

在 Sass 中，你可以使用 @for directive做这个。

@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:

<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>

在纯 CSS 中根本无法将 input[id="slide1"] 与 label[for="slide2"] 匹配，input[ id="slide2"] 和 label[for="slide2"]，等等，而不用像你已经在 :nth-child( )。

这样做的 CSS 方式类似于:

#cottage-image-gallery input:nth-of-type([id]):checked ~ label:nth-of-type([for]) img

但是你不能在 :nth-child() 中使用属性选择器。也许在未来!