Dynamic comments for Hologram with SASS -

i including hologram in current project, use sass (with compass).

we have list of colors used in project :

$colors:     "white" #fff,     "black" #000,     "grey" #a9a9a9; 

i'm trying hologram documentation :

/*doc --- title: colors name: colors category: base css ---  list of 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 far using sass loops (sassmeister link):

/*doc --- title: colors name: colors category: base css ---  list of 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 comments before write html hologram use. hologram picks top part.

is there way ?

you have check last index add */

/*doc ---  title: colors  name: colors  category: base css ---  list of colors used.    @for $i 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);     } }