SASS mixin to change colours on everyother section - css

Question

I have a mixin to change the background colour based on a percentage that will change sequentially. What I'm trying to do is set it up so on the even items get a background color.
I can't figure out the :nth child sequence. using :odd wasn't working.
Here is my current mixin:
#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;
}
}
}
And i'm calling it like this:
body {
&.pageTheme-blue {
#include colorContainers-sections($blue);
}
}
And here is an example of the 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

If I understand correctly, you try to give every second <section> element a different and previously generated background-color. Basically, this would do the job:
section:nth-child(#{$i*2}) {
background-color : $loop_color;
}
However, the above will target every even number only up to the 10th child, as your loop goes from 0 to 5. In case you have more than ten <section> elements and you want to have this lightning up background-color effect to repeat, you can use the following logic:
#for $i from 1 through 6 {
...
section:nth-child(12n - #{12 - ($i * 2)}) {
background-color : $loop_color;
}
}
How it works
You have six different colors and only every second child should get one of them. So the first color in the color palette must be applied to the 2nd, 14th, 26th, ... element, the second color must be applied to the 4th, 16th, 28th, ... element and so on:
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
...
Now all you have to understand is, how nth-child works. For example:
How about the :nth-child(2n+1)?
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
Demo
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;
}
<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>