Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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.