Goodzilla Goodzilla - 23 days ago 6
Sass (Sass) Question

Dynamic comments for Hologram with SASS

I am including Hologram in a current project, where we already use SASS (with compass).

We have a list of colors used in the project :

$colors:
"white" #FFF,
"black" #000,
"grey" #A9A9A9;


I'm trying to get my hologram documentation to look like this :

/*doc
---
title: Colors
name: Colors
category: Base CSS
---

List of the colors used.

<div class="cube-wrapper">
<div class="color-cube white"></div>
<code>$white</code>
</div>

<div class="cube-wrapper">
<div class="color-cube black"></div>
<code>$black</code>
</div>

<div class="cube-wrapper">
<div class="color-cube grey"></div>
<code>$grey</code>
</div>

*/


This is as far as I could get using sass loops (SassMeister link):

/*doc
---
title: Colors
name: Colors
category: Base CSS
---

List of the colors used.

*/

@each $i in $colors {
/*
<div class="cube-wrapper">
<div class="color-cube #{nth($i, 1)}"></div>
<code>$#{nth($i, 1)}</code>
</div>
*/
}

@each $i in $colors {
.#{nth($i, 1)} {
background-color: nth($i, 2);
}
}


Problem is, I'm closing my comments before I even write the HTML that Hologram will use. So Hologram only picks up the top part.

Is there a way to do this ?

Answer

You have to check for the last index then add */

/*doc
---
 title: Colors
 name: Colors
 category: Base CSS
---

List of the colors used.



@for $i from 1 through length($colors)  {

    <div class="cube-wrapper">
        <div class="color-cube #{nth($i, 1)}"></div>
        <code>$#{nth($i, 1)}</code>
    </div>
   @if length($colors)
    */
}

@each $i in $colors {
    .#{nth($i, 1)} {
        background-color: nth($i, 2);
    }
}