From a8c6845854ce6d94cdf7fa2363c3a7507c38bed6 Mon Sep 17 00:00:00 2001
From: Christine Duane <ckduane@users.noreply.github.com>
Date: Sat, 9 Mar 2019 03:41:13 -0800
Subject: [PATCH] Add darken, lighten and if function (#28715)

Fix casing, add if function, cite source
---
 guide/english/sass/index.md | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/guide/english/sass/index.md b/guide/english/sass/index.md
index 00762606f5..c1b2c1bd1a 100644
--- a/guide/english/sass/index.md
+++ b/guide/english/sass/index.md
@@ -151,13 +151,47 @@ Example 2:
 ```
 Both selectors(`#myDiv` and `#myOtherDiv`) will inherit properties from `%success`, while maintaining their own unique properties.
 
+## Functions
+Sass has built in functions which can be easily used to manipulate colors.
+
+### Darken + Lighten
+The first argument contains the color, the second the percentage adjusted.
+
+```sass
+$heading-color
+.nav-bar li {
+  &.active {
+    darken( $heading-color, 10% );
+  }
+  &:hover {
+    lighten( $heading-color, 10% );
+  }
+}
+```
+
+Sass also provides control directives such as `@if`, `@for`, `@each` and `@while`
+
+### @if
+```sass
+$boolean: true
+
+@if $boolean
+  .header {
+    display: block;
+  }
+@else
+  .header {
+    display: none;
+  }
+```
+
 ## Operators
 
 Sass adds mathematical operators, such as +, -, *, / and % to CSS.
 
 Example:
 
-```
+```sass
 #myDiv {
   height: 1920px / 480px;
   width: 1080px * 2;