What does .# mean or do in an each loop? Each Loop 6/9

#1



https://www.codecademy.com/en/courses/learn-sass/lessons/functions-and-operations/exercises/each-loops?action=resume


I'm not really stuck I just want further explanation on what ".#" does and how it works. 


$list: (orange, purple, teal);

//Add your each-loop here
@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

#2

This is string interpolation. The resulting style sheet will be,

.orange {
    background: orange;
}
.purple {
    background: purple;
}
.teal {
    background: teal;
}
#3

I see. Yes, Thank you. I was also confused about the "." before it then I realized it's the "." before each class name. SMH.

#4

Sry, I still don't get it. Why would you need a #-sign? Wouldn't it be easier to just write something like ".$item"? What do we need the #-sign for?

#5

Look up the meaning of interpolation.

In CSS, {} denotes a property declaration block; # denotes an ID. There is no $ in CSS, nor are there variables.

.$var {

}

is invalid CSS. We must interpolate the variable so it is interpreted as a string by the parser.

#6

I guess it would be confusing with out the entire code

The HTML

<div class="orange">orange</div>
<div class="purple">purple</div>
<div class="teal">teal</div>

SCSS

$list: (orange, purple, teal);

//Add your each-loop here
@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

@megid, as I understand it, since this is used in a loop, or a bit of code that runs over and over until a condition is met, #{$item} will change values according to the list. Since the class name is also the css property for the color that may have caused some of the confusion.

In short. # or string interpolation in this each-loop means it will use each value in $list and replace $item with it until it's done. #{your-variable} is needed to output the values as string data.

I hope this helps.

#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.