<p>Let&#39;s say you allow 5 sizes of icons in your web application and they&#39;re in 6-pixel increments: 12, 18, 24, 30, and 36. Your Sass file might have something like the following to handle this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  &--size-12 {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    width: 12px;</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    height: 12px;</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    font-size: 12px;</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  &--size-18 {</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    width: 18px;</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">    height: 18px;</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    font-size: 18px;</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code">  &--size-24 {</span>||</div>||<div>||<span class="line-number">15</span>||<span class="line-of-code">    width: 24px;</span>||</div>||<div>||<span class="line-number">16</span>||<span class="line-of-code">    height: 24px;</span>||</div>||<div>||<span class="line-number">17</span>||<span class="line-of-code">    font-size: 24px;</span>||</div>||<div>||<span class="line-number">18</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">19</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">20</span>||<span class="line-of-code">  &--size-30 {</span>||</div>||<div>||<span class="line-number">21</span>||<span class="line-of-code">    width: 30px;</span>||</div>||<div>||<span class="line-number">22</span>||<span class="line-of-code">    height: 30px;</span>||</div>||<div>||<span class="line-number">23</span>||<span class="line-of-code">    font-size: 30px;</span>||</div>||<div>||<span class="line-number">24</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">25</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">26</span>||<span class="line-of-code">  &--size-36 {</span>||</div>||<div>||<span class="line-number">27</span>||<span class="line-of-code">    width: 36px;</span>||</div>||<div>||<span class="line-number">28</span>||<span class="line-of-code">    height: 36px;</span>||</div>||<div>||<span class="line-number">29</span>||<span class="line-of-code">    font-size: 36px;</span>||</div>||<div>||<span class="line-number">30</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">31</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">32</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>These all look really similar, right? The class names all have the same format, and each one sets a <code>width</code>, <code>height</code>, and <code>font-size</code> to be the same thing. Would you believe me if I told you that it&#39;s possible to dynamically create blocks of CSS for class names in Sass?</p>
<p>Well, believe me! It&#39;s true!</p>
<p>Here&#39;s one way you can introduce a <code>@for</code> to do this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  @for $i from 1 through 5 {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    $base-size: 12;</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    $increment: 6;</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    $calculated-size: $base-size + ($i * $increment);</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    &--size-#{$calculated-size} {</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      width: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">      height: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">      font-size: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    }</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>What if you don&#39;t have even increments, though? You can also loop through an array of values like this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">$icon-sizes: 12, 16, 32, 48;</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  @each $size in $icon-sizes {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    &--size-#{$size} {</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">      width: #{size}px;</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">      height: #{size}px;</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      font-size: #{size}px;</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    }</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code"></span>||</div>||</pre>


Ashlee M Boyer

Posts with the "scss" tag

How to Dynamically Create Many Similar CSS Classes with Sass