Code review

Author: nex3

source/_includes/code_snippets/example-if-parent-selector.liquid

@@ -1,6 +1,6 @@
 {% codeExample 'if-parent-selector' %}
   @mixin app-background($color) {
-    #{if(sass(&): '&.app-background'; '.app-background')} {
+    #{if(sass(&): '&.app-background'; else: '.app-background')} {
       background-color: $color;
       color: rgba(#fff, 0.75);
     }
@@ -13,7 +13,7 @@
   }
   ===
   @mixin app-background($color)
-    #{if(sass(&): '&.app-background'; '.app-background')}
+    #{if(sass(&): '&.app-background'; else: '.app-background')}
       background-color: $color
       color: rgba(#fff, 0.75)
 

source/assets/sass/layout/_grid-system.scss

@@ -18,7 +18,7 @@
 }
 
 @each $breakpoint, $size in config.$sl-breakpoints {
-  $prefix: if(sass($breakpoint == 'none'): ''; '#{$breakpoint}-');
+  $prefix: if(sass($breakpoint == 'none'): ''; else: '#{$breakpoint}-');
 
   @include config.sl-breakpoint-set($breakpoint, $size) {
     .sl-l-#{$prefix}grid {

source/assets/sass/layout/_holy-grail.scss

@@ -1,7 +1,7 @@
 @use '../config';
 
 @each $breakpoint, $size in config.$sl-breakpoints {
-  $prefix: if(sass($breakpoint == 'none'): ''; '#{$breakpoint}-');
+  $prefix: if(sass($breakpoint == 'none'): ''; else: '#{$breakpoint}-');
 
   @include config.sl-breakpoint-set($breakpoint, $size) {
     .sl-l-#{$prefix}holy-grail {

source/documentation/at-rules/error.md

@@ -22,8 +22,8 @@ whatever system is running it that an error occurred.
       @error "Property #{$property} must be either left or right.";
     }
 
-    $left-value: if(sass($property == right): initial; $value);
-    $right-value: if(sass($property == right): $value; initial);
+    $left-value: if(sass($property == right): initial; else: $value);
+    $right-value: if(sass($property == right): $value; else: initial);
 
     left: $left-value;
     right: $right-value;
@@ -44,8 +44,8 @@ whatever system is running it that an error occurred.
       @error "Property #{$property} must be either left or right."
 
 
-    $left-value: if(sass($property == right): initial; $value)
-    $right-value: if(sass($property == right): $value; initial)
+    $left-value: if(sass($property == right): initial; else: $value)
+    $right-value: if(sass($property == right): $value; else: initial)
 
     left: $left-value
     right: $right-value

source/documentation/breaking-changes/if-function.md

@@ -41,15 +41,15 @@ function to the CSS `if()` syntax.
   @use 'sass:meta';
 
   // Instead of if(true, 10px, 15px)
-  @debug if(sass(true): 10px; 15px);
+  @debug if(sass(true): 10px; else: 15px);
 
   // Instead of if(meta.variable-defined($var), $var, null)
   @debug if(sass(meta.variable-defined($var)): $var);
   ===
   @use 'sass:meta'
 
   // Instead of if(true, 10px, 15px)
-  @debug if(sass(true): 10px; 15px)
+  @debug if(sass(true): 10px; else: 15px)
 
   // Instead of if(meta.variable-defined($var), $var, null)
   @debug if(sass(meta.variable-defined($var)): $var)

source/documentation/values/booleans.md

@@ -67,11 +67,11 @@ if its argument is `false`:
 [`if()` function]: /documentation/syntax/special-functions#if
 
 {% codeExample 'if-function', false %}
-  @debug if(true: 10px; 30px); // 10px
-  @debug if(false: 10px; 30px); // 30px
+  @debug if(true: 10px; else: 30px); // 10px
+  @debug if(false: 10px; else: 30px); // 30px
   ===
-  @debug if(true: 10px; 30px)  // 10px
-  @debug if(false: 10px; 30px)  // 30px
+  @debug if(true: 10px; else: 30px)  // 10px
+  @debug if(false: 10px; else: 30px)  // 30px
 {% endcodeExample %}
 
 {% render 'doc_snippets/truthiness-and-falsiness' %}