The @if directive (Sass Bites Podcast #5)

[email protected]

/* CSS Output */

/* General div styles */
div {
  display: inline-block;
  padding: 20px;
  text-align: center;
  width: 200px;
  height: 200px;
}

/* Example #1 */
div {
  color: green;
  border: 2px solid blue;
}

/* Example #2 */
div {
  sound: woof;
  play: yes;
}

/* Example #3 */
p {
  color: green;
}

/* Example #4 */
div {
  font-size: 48px;
  font-size: 3rem;
  output: 3;
  output: 4;
  output: 5;
}

/* Example #5 */
div {
  font-size: 2rem;
}

[email protected]

<!-- HTML code -->

<div>One</div>
<div>Two</div>
<div>Three</div>

[email protected]

/* Sass Code */

// General styles
div
  display: inline-block
  padding: 20px
  text-align: center
  width: 200px
  height: 200px

// Example #1

$font-size: 2em
$background: blue

div
  @if $font-size == 1em
    color: red
  @if $font-size == 2em
    color: green
  @if $background == blue and $background == blue
    border: 2px solid blue
  @if $background != blue or $background == red
    border: 2px solid red

// Example #2
// Micah's @if Example

$animal: dog
$tail: wag

div
  @if $animal == cat
    sound: meow
  @if $animal == dog
    sound: woof
  @if $animal == cat and $tail == curl
    nap: yes
  @if $animal == "dog" or $tail != curl
    play: yes

// Example #3
// Micah's @if/@else example

$type: monster

p
  @if $type == ocean
    color: blue
  @else if $type == matador
    color: red
  @else if $type == monster
    color: green
  @else
    color: black

// Example #4
// Micah's @mixin if-demo

$ie-support: true

=if-demo($var)
  @if $ie-support
    // external variable
    font-size: $var * 16px
  @if unitless($var)
    // parameter variable
    font-size: $var + rem
  @for $i from 1 through 5
    @if $i > 2
      // internal variable
      output: $i

div
  +if-demo(3)

// Example #4
// Micah's Ternary Statement
$ie-support: false
$var: 2

div
  font-size: if($ie-support, $var * 16px, $var + rem)

[email protected]

/* SCSS Code */

// General styles
div {
  display: inline-block;
  padding: 20px;
  text-align: center;
  width: 200px;
  height: 200px;
}

// Example #1

$font-size: 2em;
$background: blue;

div {
  @if $font-size == 1em {
    color: red;
  }
  @if $font-size == 2em  {
    color: green;
  }
  @if $background == blue and $background == blue {
    border: 2px solid blue;
  }
  @if $background != blue or $background == red {
    border: 2px solid red;
  }
}

// Example #2
// Micah's @if Example

$animal: dog;
$tail: wag;

div {
  @if $animal == cat {
    sound: meow;
  }
  @if $animal == dog {
    sound: woof;
  }
  @if $animal == cat and $tail == curl {
    nap: yes;
  }
  @if $animal == 'dog' or $tail != curl {
    play: yes;
  }
}

// Example #3
// Micah's @if/@else example

$type: monster;

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

// Example #4
// Micah's @mixin if-demo

$ie-support: true;

@mixin if-demo($var) {
  @if $ie-support { // external variable
    font-size: $var * 16px;
  }
  @if unitless($var) { // parameter variable
    font-size: $var + rem;
  }
  @for $i from 1 through 5 {
    @if $i > 2 { // internal variable
      output: $i;
    }
  }
}

div {
  @include if-demo(3);
}

// Example #4
// Micah's Ternary Statement
$ie-support: false;
$var: 2;

div {
  font-size: if($ie-support, $var * 16px, $var + rem);
}

Sass Bites Podcast #5 (with Mike McElroy)
The @if directive
https://www.youtube.com/watch?v=n-zMNmPU6t8
https://www.youtube.com/user/sassbites