[SASS] Add control directives, and misc. fixes (#1805)

* [SASS] Add control directives, other selector uses, and variables in selector names

* sass: add contributor credit

1 files changed, 149 insertions, 4 deletions

diff --git a/sass.html.markdown b/sass.html.markdown
index 4d4ece71..802b40f4 100644
--- a/sass.html.markdown
+++ b/sass.html.markdown
@@ -5,6 +5,7 @@ contributors:
   - ["Laura Kyle", "https://github.com/LauraNK"]
   - ["Sean Corrales", "https://github.com/droidenator"]
   - ["Kyle Mendes", "https://github.com/pink401k"]
+  - ["Keith Miyake", "https://github.com/kaymmm"]
 ---
 
 Sass is a CSS extension language that adds features such as variables, nesting, mixins and more.
@@ -52,16 +53,161 @@ body {
 	font-family: 'Roboto', sans-serif;
 }
 
-
 /* This is much more maintainable than having to change the color
 each time it appears throughout your stylesheet. */
 
 
 
-/* Mixins
+/* Control Directives
 ============================== */
 
+/* Sass lets you use @if, @else, @for, @while, and @each to control the
+   compilation of your code to CSS. */
+
+/* @if/@else blocks behave exactly as you might expect */
+
+$debug: true !default;
+
+@mixin debugmode {
+	@if $debug {
+		@debug "Debug mode enabled";
+
+		display: inline-block;
+	}
+	@else {
+		display: none;
+	}
+}
+
+.info {
+	@include debugmode;
+}
+
+/* If $debug is set to true, .info is displayed; if it's set to false then
+.info is not displayed.
+
+Note: @debug will output debugging information to the command line.
+Useful for checking variables while debugging your SCSS. */
+
+.info {
+	display: inline-block;
+}
+
+/* @for is a control loop that iterates through a range of values.
+Particularly useful for setting styles on a collection of items.
+There are two forms, "through" and "to." The former includes the last value,
+the latter stops at the last value. */
+
+@for $c from 1 to 4 {
+	div:nth-of-type(#{$c}) {
+		left: ($c - 1) * 900 / 3;
+	}
+}
+
+@for $c from 1 through 3 {
+	.myclass-#{$c} {
+		color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3);
+	}
+}
+
+/* Will compile to: */
 
+div:nth-of-type(1) {
+	left: 0;
+}
+
+div:nth-of-type(2) {
+	left: 300;
+}
+
+div:nth-of-type(3) {
+	left: 600;
+}
+
+.myclass-1 {
+	color: #555555;
+}
+
+.myclass-2 {
+	color: #aaaaaa;
+}
+
+.myclass-3 {
+	color: white;
+// SASS automatically converts #FFFFFF to white
+}
+
+/* @while is very straightforward: */
+
+$columns: 4;
+$column-width: 80px;
+
+@while $columns > 0 {
+	.col-#{$columns} {
+		width: $column-width;
+		left: $column-width * ($columns - 1);
+	}
+
+	$columns: $columns - 1;
+}
+
+/* Will output the following CSS: */
+
+.col-4 {
+	width: 80px;
+	left: 240px;
+}
+
+.col-3 {
+	width: 80px;
+	left: 160px;
+}
+
+.col-2 {
+	width: 80px;
+	left: 80px;
+}
+
+.col-1 {
+	width: 80px;
+	left: 0px;
+}
+
+/* @each functions like @for, except using a list instead of ordinal values
+Note: you specify lists just like other variables, with spaces as
+delimiters. */
+
+$social-links: facebook twitter linkedin reddit;
+
+.social-links {
+	@each $sm in $social-links {
+		.icon-#{$sm} {
+			background-image: url("images/#{$sm}.png");
+		}
+	}
+}
+
+/* Which will output: */
+
+.social-links .icon-facebook {
+	background-image: url("images/facebook.png");
+}
+
+.social-links .icon-twitter {
+	background-image: url("images/twitter.png");
+}
+
+.social-links .icon-linkedin {
+	background-image: url("images/linkedin.png");
+}
+
+.social-links .icon-reddit {
+	background-image: url("images/reddit.png");
+}
+
+
+/*Mixins
+==============================*/
 
 /* If you find you are writing the same code for more than one
 element, you might want to store that code in a mixin.
@@ -93,7 +239,6 @@ div {
 	background-color: #A3A4FF;
 }
 
-
 /* You can use mixins to create a shorthand property. */
 
 @mixin size($width, $height) {
@@ -139,7 +284,7 @@ body {
 }
 
 .footer {
-  background-color: fade_out(#000000, 0.25)
+  background-color: fade_out(#000000, 0.25);
 }
 
 /* Compiles to: */