The @for directive (Sass Bites Podcast #8)

[email protected]

/* CSS Output */
h1, h2, h3, h4, h5, h6 {
  display: inline;
}

/* Example 1: simple @for example */
h1 {
  font-size: 1em;
  padding: 20px;
}

h2 {
  font-size: 2em;
  padding: 20px;
}

h3 {
  font-size: 3em;
  padding: 20px;
}

h4 {
  font-size: 4em;
  padding: 20px;
}

h5 {
  font-size: 5em;
  padding: 20px;
}

h6 {
  font-size: 6em;
  padding: 20px;
}

/* Example #2: @for */
h0 {
  font-size: 0em;
  padding: 20px;
}

h1 {
  font-size: 1em;
  padding: 20px;
}

h2 {
  font-size: 2em;
  padding: 20px;
}

h3 {
  font-size: 3em;
  padding: 20px;
}

h4 {
  font-size: 4em;
  padding: 20px;
}

h5 {
  font-size: 5em;
  padding: 20px;
}

h6 {
  font-size: 6em;
  padding: 20px;
}

/* Example #3: @while */
h1 {
  font-size: 1em;
  padding: 20px;
}

h2 {
  font-size: 2em;
  padding: 20px;
}

h3 {
  font-size: 3em;
  padding: 20px;
}

h4 {
  font-size: 4em;
  padding: 20px;
}

h5 {
  font-size: 5em;
  padding: 20px;
}

h6 {
  font-size: 6em;
  padding: 20px;
}

/* Example #4: @each */
h6 {
  font-size: 6em;
  padding: 20px;
}

h5 {
  font-size: 5em;
  padding: 20px;
}

h4 {
  font-size: 4em;
  padding: 20px;
}

h3 {
  font-size: 3em;
  padding: 20px;
}

h2 {
  font-size: 2em;
  padding: 20px;
}

h1 {
  font-size: 1em;
  padding: 20px;
}

[email protected]

<!-- HTML code -->
<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>
<h6>Six</h6>

[email protected]

/* Sass code */
// General styles

h1,h2,h3,h4,h5,h6 
  display: inline
  
/* Example 1: simple @for example */
// loop through h1-h6
// adapted from Micah's example
// this example uses "though"

@for $i from 1 through 6
  h#{$i}
    font-size: $i/1 + em
    padding: 20px
    
/* Example #2: @for */
// adapted from Micah's example
// this example uses "to"

@for $i from 0 to 7
  h#{$i}
    font-size: $i/1 + em
    padding: 20px
    
/* Example #3: @while */
// Same as the example above but
// using @while

$i: 1

@while $i < 7
  h#{$i}
    font-size: $i / 1 + em
    padding: 20px
  $i: $i + 1
  
/* Example #4: @each */
// Same as the example above but
// using @each

$list: 6 5 4 3 2 1

@each $i in $list
  h#{$i}
    font-size: $i / 1 + em
    padding: 20px

[email protected]

/* SCSS code */
// General styles

h1, h2, h3, h4, h5, h6 {
  display: inline;
}

/* Example 1: simple @for example */
// loop through h1-h6
// adapted from Micah's example
// this example uses "though"

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $i / 1 + em;
    padding: 20px;
  }
}

/* Example #2: @for */
// adapted from Micah's example
// this example uses "to"

@for $i from 0 to 7 {
  h#{$i} {
    font-size: $i / 1 + em;
    padding: 20px;
  }
}

/* Example #3: @while */
// Same as the example above but
// using @while

$i: 1;

@while $i < 7 {
  h#{$i} {
    font-size: $i / 1 + em;
    padding: 20px;
  }
  $i: $i + 1;
}

/* Example #4: @each */
// Same as the example above but
// using @each

$list: 6 5 4 3 2 1;

@each $i in $list {
  h#{$i} {
    font-size: $i / 1 + em;
    padding: 20px;
  }
}

Sass Bites Podcast #8: The @for directive
https://www.youtube.com/watch?v=ns8pxsv6G5I
https://www.youtube.com/user/sassbites