Question

我有一个mixin来根据将按顺序改变的百分比来改变背景颜色。我正在尝试做的是设置它，以便偶数项获得背景颜色。

我无法弄清楚：第n个孩子序列。使用：奇数不起作用。

这是我目前的混音：

@mixin colorContainers-sections($startcolor) {
  $loop_color : $startcolor;
  @for $i from 0 through 5 {
    // start colour at base
    @if $i > 1 {
      $loop_color : lighten($loop_color, 5%);
    }
    section:nth-child(2n+#{$i}) {
      background-color : $loop_color;
    }
  }
}

我这样称呼它：

body {
  &.pageTheme-blue {
    @include colorContainers-sections($blue);
  }
}

以下是HTML

的示例

    <section>
      <div class='container'>
        <div class='row'>
          <div class='col-xs-12'>
            <h2>Lorem ipsum dolor sit amet.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel imperdiet magna. Morbi molestie at quam a accumsan. Morbi libero metus, dictum vitae massa eget, finibus maximus mauris. Integer libero erat, consequat a ex vitae, suscipit ultricies lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis diam at efficitur sollicitudin. Sed eleifend ligula egestas orci eleifend convallis. Vestibulum id enim nisi. Nam tempor felis id sem mattis, ac commodo dui malesuada. Praesent quis molestie velit. Aliquam cursus dui quis auctor dapibus. Suspendisse iaculis quis ex ac aliquet. Curabitur varius rutrum mauris at iaculis. Ut molestie mi placerat tempus faucibus. Nam aliquet interdum velit nec malesuada.</p>

            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut urna augue, imperdiet a felis sed, sagittis dapibus dolor. Sed ut est ac augue tempor lobortis sit amet ut risus. Donec justo risus, ornare a justo et, posuere euismod mi. Vestibulum nec.</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class='container'>
        <div class='row'>
          <div class='col-xs-12'>
            <h2>Lorem ipsum dolor sit amet.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel imperdiet magna. Morbi molestie at quam a accumsan. Morbi libero metus, dictum vitae massa eget, finibus maximus mauris. Integer libero erat, consequat a ex vitae, suscipit ultricies lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis diam at efficitur sollicitudin. Sed eleifend ligula egestas orci eleifend convallis. Vestibulum id enim nisi. Nam tempor felis id sem mattis, ac commodo dui malesuada. Praesent quis molestie velit. Aliquam cursus dui quis auctor dapibus. Suspendisse iaculis quis ex ac aliquet. Curabitur varius rutrum mauris at iaculis. Ut molestie mi placerat tempus faucibus. Nam aliquet interdum velit nec malesuada.</p>

            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut urna augue, imperdiet a felis sed, sagittis dapibus dolor. Sed ut est ac augue tempor lobortis sit amet ut risus. Donec justo risus, ornare a justo et, posuere euismod mi. Vestibulum nec.</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class='container'>
        <div class='row'>
          <div class='col-xs-12'>
            <h2>Lorem ipsum dolor sit amet.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel imperdiet magna. Morbi molestie at quam a accumsan. Morbi libero metus, dictum vitae massa eget, finibus maximus mauris. Integer libero erat, consequat a ex vitae, suscipit ultricies lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis diam at efficitur sollicitudin. Sed eleifend ligula egestas orci eleifend convallis. Vestibulum id enim nisi. Nam tempor felis id sem mattis, ac commodo dui malesuada. Praesent quis molestie velit. Aliquam cursus dui quis auctor dapibus. Suspendisse iaculis quis ex ac aliquet. Curabitur varius rutrum mauris at iaculis. Ut molestie mi placerat tempus faucibus. Nam aliquet interdum velit nec malesuada.</p>

            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut urna augue, imperdiet a felis sed, sagittis dapibus dolor. Sed ut est ac augue tempor lobortis sit amet ut risus. Donec justo risus, ornare a justo et, posuere euismod mi. Vestibulum nec.</p>
          </div>
        </div>
      </div>
    </section>

Answer 1

如果我理解正确，您会尝试为每个第二个<section>元素提供不同的以前生成的背景颜色。基本上，这可以完成这项工作：

section:nth-child(#{$i*2}) {
  background-color : $loop_color;
}

但是，上面的目标是每个偶数，直到第10个孩子为止，因为你的循环从0变为5.如果你有超过10个<section>元素并且你想拥有这个闪电背景颜色效果重复，你可以使用以下逻辑：

@for $i from 1 through 6 {
  ...
  section:nth-child(12n - #{12 - ($i * 2)}) {
    background-color : $loop_color;
  }
}

如何运作

你有六种不同的颜色，只有每一个孩子都应该得到其中一种颜色。因此，调色板中的第一种颜色必须应用于2nd，14th，26th，...元素，第二种颜色必须应用于4th，16th，28th，...元素，依此类推：

c1  c2  c3  c4  c5  c6  // c = color
2   4   6   8   10  12
14  16  18  20  22  24
26  28  30  32  34  36
...

现在您需要了解的是how nth-child works。例如：

：nth-child（2n + 1）怎么样？

（2 x 0）+ 1 = 1 =第一个元素
  （2 x 1）+ 1 = 3 =第3个元素
  （2 x 2）+ 1 = 5 =第5个元素

演示

＆＃13;

section:nth-child(12n - 10) {
  background-color: #00f;
}
section:nth-child(12n - 8) {
  background-color: #1a1aff;
}
section:nth-child(12n - 6) {
  background-color: #3333ff;
}
section:nth-child(12n - 4) {
  background-color: #4d4dff;
}
section:nth-child(12n - 2) {
  background-color: #6666ff;
}
section:nth-child(12n - 0) {
  background-color: #8080ff;
}

＆＃13;

<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
<section>13</section>
<section>14</section>
<section>15</section>
<section>16</section>
<section>17</section>
<section>18</section>
<section>19</section>
<section>20</section>
<section>21</section>
<section>22</section>
<section>23</section>
<section>24</section>

＆＃13;

SASS mixin可以改变其他部分的颜色

1 个答案:

如何运作

演示