Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Sam Lillicrap
Sam Lillicrap
12,127 Points

Sass for loop question

Hi guys,

I want to create a sass loop that does this..

$var1: 30px;
$var2: 0px;

I want to say for every pixel greater than 30 (in var1) - add one pixel to var 2.

so it'd be:

$var1: 31px;
$var2: 1px;

$var1: 32px;


I swear it should be a for loop but I'm not sure..

Help would be appreciated lots! Cheers -Sam

2 Answers

I am unsure how you wanna implement the loop property and selector wise but the basic functionality you were asking for might be in here:

$var1: 30px;
$var2: 0px;

@for $i from 0 to 4 {
   height: $var1 + $i;
   width: $var2 + $i;


.number-0 {
  height: 30px;
  width: 0px; }

.number-1 {
  height: 31px;
  width: 1px; }

.number-2 {
  height: 32px;
  width: 2px; }

.number-3 {
  height: 33px;
  width: 3px; }

best regards Ralf

you cannot do loop in SASS. SASS cannot think dynamically, use javascript. Or if you are looking for systematic functions, then yes SASS can do it. Can you please post your .scss code here.

Sam Lillicrap
Sam Lillicrap
12,127 Points

It might not be a loop but I know for a fact it can definitely do what I've described there. Check here: http://thesassway.com/intermediate/if-for-each-while/

I'm just unsure of how to use them!

My code is here: http://codepen.io/samueljweb/pen/LbGxi

hi, didnt knew abt while loop. thanks.

Looking at ur pen.

hi, didnt knew abt WHILE loop in sass, thanks.

chking out ur PEN.