The @while directive (Sass Bites Podcast #7)

[email protected]

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

h1 {
  color: orange;
}

h2 {
  color: #cc8400;
}

h3 {
  color: #996300;
}

h4 {
  color: #664200;
}

h5 {
  color: #4d3200;
}

h6 {
  color: #332100;
}

/* Example #1: Micah's h1-h6 example */
h1 {
  font-size: 6rem;
}

h2 {
  font-size: 5rem;
}

h3 {
  font-size: 4rem;
}

h4 {
  font-size: 3rem;
}

h5 {
  font-size: 2rem;
}

h6 {
  font-size: 1rem;
}

/* Example #2: Michah's color-family mixin */
h1 {
  font-size: 6rem;
  color: #ffa6b6;
}

h2 {
  font-size: 5rem;
  color: #ff8da1;
}

h3 {
  font-size: 4rem;
  color: #ff738c;
}

h4 {
  font-size: 3rem;
  color: #ff5a77;
}

h5 {
  font-size: 2rem;
  color: #ff4162;
}

h6 {
  font-size: 1rem;
  color: #ff274d;
}

/* Example 3: Michah's sort function */
div {
  original: 12 10 13 9 9 13;
  sorted: 9 10 12 13;
}

[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
  padding: 5px

$color: orange

h1
  color: $color

h2
  color: darken(orange, 10)

h3
  color: darken(orange, 20)

h4
  color: darken(orange, 30)

h5
  color: darken(orange, 35)

h6
  color: darken(orange, 40)

/* Example #1: Micah's h1-h6 example */
// But I've adjusted it a little :)

$foo: 1
$bar: 7

@while $foo < $bar
  // do something
  h#{$foo}
    font-size: $bar - $foo + rem
  $foo: $foo + 1
  // advance a counter

/* Example #2: Michah's color-family mixin */
// Better way to do the above example

=color-family($color, $steps, $amount)
  $var: 1
  @while $var < $steps
    h#{$var}
      font-size: 7rem - $var
      color: darken($color, $var * $amount)
    $var: $var + 1

+color-family(pink, 7, 5%)

/* Example 3: Michah's sort function */
// Create a list of all the numbers
// Sort they in ascending order
// Get rid of any duplicates

@function sort($list)
  // create an empty Sass array
  $sortedlist: ()
  // loop through the $list
  // which is the parameter of the sort function
  @while length($list) > 0
    $value: nth($list, 1)
    @each $item in $list
      @if $item < $value
        $value: $item
    // append the number to the $list and add a space
    // between each number in the $sortedList
    $sortedlist: append($sortedlist, $value, "space")
    // reject() is a Compass function
    // this is what gets rids of any duplicates
    $list: reject($list, $value)
  @return $sortedlist

$vars: 12 10 13 9 9 13

div
  original: $vars
  sorted: sort($vars)

[email protected]

/* SCSS Code */
// General styles
h1,h2,h3,h4,h5,h6 {
display: inline;
padding: 5px;
}

$color: orange;

h1 {
  color: $color;
}

h2 {
  color: darken(orange, 10);
}

h3 {
  color: darken(orange, 20);
}

h4 {
  color: darken(orange, 30);
}

h5 {
  color: darken(orange, 35);
}

h6 {
  color: darken(orange, 40);
}

/* Example #1: Micah's h1-h6 example */
// But I've adjusted it a little :)

$foo: 1;
$bar: 7;

@while $foo < $bar { // do something
  h#{$foo} {
    font-size: ($bar - $foo) + rem;
  }  
  $foo: $foo + 1; // advance a counter
}

/* Example #2: Michah's color-family mixin */
// Better way to do the above example

@mixin color-family($color, $steps, $amount) {
  $var: 1;
  
  @while $var < $steps {
    h#{$var} {
      font-size: 7rem - $var;
      color: darken($color, ($var * $amount));
    }
    $var: $var + 1;
      
    }
}

@include color-family(pink,  7, 5%);

/* Example 3: Michah's sort function */
// Create a list of all the numbers
// Sort they in ascending order
// Get rid of any duplicates

@function sort($list) {
    // create an empty Sass array
    $sortedlist: ();
    // loop through the $list
    // which is the parameter of the sort function
    @while length($list) > 0 {
        $value: nth($list,1);
        @each $item in $list {
            @if $item < $value {
                $value: $item;
            }
        }
        // append the number to the $list and add a space
        // between each number in the $sortedList
        $sortedlist: append($sortedlist, $value, 'space');
        // reject() is a Compass function
        // this is what gets rids of any duplicates
        $list: reject($list, $value);
    }
    @return $sortedlist;
}

$vars: 12 10 13 9 9 13;

div {
    original: $vars;
    sorted: sort($vars);
}

[email protected]

/* Micah Godbolt's CSS Output */
h1 {
  font-size: 5em;
}

h2 {
  font-size: 4em;
}

h3 {
  font-size: 3em;
}

h4 {
  font-size: 2em;
}

h5 {
  font-size: 1em;
}

.class-0 {
  color: blue;
}

.class-1 {
  color: #0000cc;
}

.class-2 {
  color: #000099;
}

.class-3 {
  color: #000066;
}

.class-4 {
  color: #000033;
}

div {
  original: 12 10 13 9;
  sorted: 9 10 12 13;
}

[email protected]

/* Micah Godbolt's Sass Code */
$foo: 1
$bar: 6

@while $foo < $bar
  h#{$foo}
    // do something
    font-size: $bar - $foo + em
  $foo: $foo + 1
  // advance a counter

=color-family($color, $steps, $amount)
  $var: 0
  @while $var < $steps
    .class-#{$var}
      color: darken($color, $var * $amount)
    $var: $var + 1

+color-family(blue, 5, 10%)

@function sort($list)
  $sortedlist: ()
  @while length($list) > 0
    $value: nth($list, 1)
    @each $item in $list
      @if $item < $value
        $value: $item
    $sortedlist: append($sortedlist, $value, "space")
    $list: reject($list, $value)
  @return $sortedlist

$vars: 12 10 13 9

div
  original: $vars
  sorted: sort($vars)

[email protected]

/* Micah Godbolt's SCSS Code */


$foo: 1;
$bar: 6;

@while $foo < $bar {
    h#{$foo} { // do something
        font-size: ($bar - $foo)+em;
    }
    $foo: $foo + 1; // advance a counter
}

@mixin color-family($color, $steps, $amount) {
    $var: 0;
    @while $var < $steps {
        .class-#{$var} {
            color: darken($color, ($var * $amount));
        }
    $var: $var + 1;
    }
}

@include color-family(blue, 5, 10%);

@function sort($list) {
    $sortedlist: ();
    @while length($list) > 0 {
        $value: nth($list,1);
        @each $item in $list {
            @if $item < $value {
                $value: $item;
            }
        }
        $sortedlist: append($sortedlist, $value, 'space');
        $list: reject($list, $value);
    }
    @return $sortedlist;
}

$vars: 12 10 13 9;

div {
    original: $vars;
    sorted: sort($vars);
}

Sass Bites Podcast #7: @while directive (with Chris Bloom)
https://gist.github.com/micahgodbolt/6542163
https://www.youtube.com/watch?v=VTVzZmJruXM
https://www.youtube.com/user/sassbites