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! While you're at it, check out some resources Treehouse students have shared here.

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

CSS

Sam Lillicrap
Sam Lillicrap
12,127 Points
Posted by 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;
$var2:2px;

excetera

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

Help would be appreciated lots! Cheers -Sam

2 Answers

Ralf Koller
Ralf Koller
4,506 Points
Ralf Koller
Ralf Koller
4,506 Points

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 {
.number-#{$i}{
   height: $var1 + $i;
   width: $var2 + $i;
   }
}

returns:

.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

Ajinkya Borade
PLUS
Ajinkya Borade
Courses Plus Student 16,635 Points
Ajinkya Borade
Ajinkya Borade
Courses Plus Student 16,635 Points

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
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

Ajinkya Borade
Ajinkya Borade
Courses Plus Student 16,635 Points

hi, didnt knew abt while loop. thanks.

Looking at ur pen.

Ajinkya Borade
Ajinkya Borade
Courses Plus Student 16,635 Points

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

chking out ur PEN.