Switch to SCSS syntax to resolve abiguous syntax issues in SASS

src/_accessibility.scss

@@ -11,13 +11,15 @@
  *    made for standard and expected behavior, but it is easy enough to add
  *    a focus outline back in the application styling if that's what you want.
  */
-:focus
-  outline: none /* 1 */
+:focus {
+  outline: none;
+}
 
 /**
  * 1. Remove the underline that Firefox adds to elements with a title.
  *
  *    Again, this might be controversal but see the comments on :focus above.
  */
-[title]
-  text-decoration: none /* 1 */
+[title] {
+  text-decoration: none;
+}

src/_blocks.scss

@@ -16,5 +16,6 @@ a, address, cite, code, dd, dfn, dl, dt, figcaption, figure, kbd, ol, ul, samp,
 rp, rt, ruby, /* language elements */
 details, meter, progress, summary, /* interactive elements */
 audio, canvas, embed, img, svg, video, /* embedded content */
-button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea /* form elements */
-  display: block /* 1 */
+button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea /* form elements */ {
+  display: block; /* 1 */
+}

src/_box-sizing.scss

@@ -7,8 +7,10 @@
  *    This method seems to cause the least number of headaches and override
  *    issues.
  */
-html
-  box-sizing: border-box /* 1 */
+html {
+  box-sizing: border-box;
+}
 
-*, *::before, *::after
-  box-sizing: inherit /* 1 */
+*, *::before, *::after {
+  box-sizing: inherit;
+}

src/_embedded-content.scss

@@ -5,25 +5,29 @@
  *    high specificity and makes it difficult to override. `img` shouldn't
  *    have borders anyway, so no harm no foul.
  */
-img
-  border: none
+img {
+  border: none;
+}
 
 /**
  * 1. Remove borders from iframes. This isn't 1995 any more.
  */
-iframe
-  border: none /* 1 */
+iframe {
+  border: none; /* 1 */
+}
 
 /**
  * 1. Prevent modern browsers from displaying `audio` without controls.
  * 2. Remove excess height in iOS 5 devices (from normalize.css).
  */
-audio:not([controls])
-  display: none /* 1 */
-  height: 0 /* 2 */
+audio:not([controls]) {
+  display: none; /* 1 */
+  height: 0; /* 2 */
+}
 
 /**
  * Correct overflow not hidden in IE 9/10/11 (from normalize.css).
  */
-svg:not(:root)
-  overflow: hidden
+svg:not(:root) {
+  overflow: hidden;
+}

src/_form-elements.scss

@@ -1,19 +1,21 @@
 /**
  * 1. Fully reset fieldsets removing all default styling.
  */
-fieldset
-  margin: 0 /* 1 */
-  padding: 0 /* 1 */
-  border: none /* 1 */
+fieldset {
+  margin: 0; /* 1 */
+  padding: 0; /* 1 */
+  border: none; /* 1 */
+}
 
 /**
  * 1. Fully reset lengends removing all default styling.
  * 2. On Android Chrome browser lengends don't expand to 100%, so we fix that.
  */
-legend
-  border: 0 /* 1 */
-  padding: 0 /* 1 */
-  width: 100% /* 2 */
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 1 */
+  width: 100%; /* 2 */
+}
 
 /**
  * Known limitation: by default, Chrome and Safari on OS X allow very limited
@@ -23,13 +25,14 @@ input:not([type="checkbox"]):not([type="radio"]),
 optgroup,
 select,
 textarea,
-button
-  margin: 0
-  padding: 0
-  border: none
-  background: none
-  font: inherit
-  color: inherit
+button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+}
 
 /**
  * 1. Remove border-radius in Safari.
@@ -38,21 +41,24 @@ button
  *    Note that this also removes the dropdown arrow in Safari, which isn't
  *    ideal but there is little we can do about it.
  */
-select
-  border-radius: 0 /* 1 */
-  -webkit-appearance: none /* 2 */
+select {
+  border-radius: 0; /* 1 */
+  -webkit-appearance: none; /* 2 */
+}
 
 /**
  * Remove default vertical scrollbar in IE 8/9/10/11 (from normalize.css).
  */
-textarea
-  overflow: auto
+textarea {
+  overflow: auto;
+}
 
 /**
  * 1. Address `overflow` set to `hidden` in IE 8/9/10/11 (from normalize.css).
  */
-button
-  overflow: visible /* 1 */
+button {
+  overflow: visible; /* 1 */
+}
 
 /**
  * 1. Address inconsistent `text-transform` inheritance for `button` and
@@ -62,17 +68,20 @@ button
  *    (from normalize.css).
  */
 button,
-select
-  text-transform: none /* 1 */
+select {
+  text-transform: none; /* 1 */
+}
 
 /**
  * 1. Remove inner padding and border in Firefox 4+ (from normalize.css).
  */
 button,
-input
-  &::-moz-focus-inner
-    border: 0 /* 1 */
-    padding: 0 /* 1 */
+input {
+  &::-moz-focus-inner {
+    border: 0; /* 1 */
+    padding: 0; /* 1 */
+  }
+}
 
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
@@ -82,26 +91,29 @@ input
  *    `input` and others.
  */
 button,
-html input[type="button"] /* 1 */,
+html input[type="button"], /* 1 */
 input[type="submit"],
-input[type="reset"]
-  -webkit-appearance: button /* 2 */
-  cursor: pointer /* 3 */
-  text-align: left
+input[type="reset"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+  text-align: left;
+}
 
 /**
  * Re-set default cursor for disabled elements.
  */
 button[disabled],
-html input[disabled]
-  cursor: default
+html input[disabled] {
+  cursor: default;
+}
 
 /**
  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
-input
-  line-height: normal
+input {
+  line-height: normal;
+}
 
 /**
  * Checkboxes and radio inputs are not styleable in most browsers unfortunately,
@@ -111,19 +123,22 @@ input
  * 2. Remove excess padding in IE 8/9/10 (from normalize.css).
  */
 input[type="checkbox"],
-input[type="radio"]
-  box-sizing: border-box /* 1 */
-  padding: 0 /* 2 */
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
 
 /**
  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
  * `font-size` values of the `input`, it causes the cursor style of the
  * decrement button to change from `default` to `text`.
  */
-input[type="number"]
+input[type="number"] {
   &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button
-    height: auto
+  &::-webkit-outer-spin-button {
+    height: auto;
+  }
+}
 
 /**
  * 1. Address `appearance` set to `searchfield` in Safari and Chrome which is
@@ -136,12 +151,14 @@ input[type="number"]
  *    safar
  *
  */
-input[type="search"]
-  -webkit-appearance: textfield /* 1 */
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
 
   &::-webkit-search-cancel-button,
-  &::-webkit-search-decoration
-    -webkit-appearance: none /* 2 */
+  &::-webkit-search-decoration {
+    -webkit-appearance: none; /* 2 */
+  }
+}
 
 /**
  * 1. Update input placeholders to inherit color (IE, Chrome and Safari) and
@@ -151,9 +168,12 @@ input[type="search"]
  *    a known bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1004130) with no
  *    workaround :(.
  */
-::-webkit-input-placeholder
-   color: inherit /* 1 */
-::-moz-placeholder
-   opacity: inherit /* 1 */
-:-ms-input-placeholder
-   color: inherit /* 1 */
+::-webkit-input-placeholder {
+  color: inherit; /* 1 */
+}
+::-moz-placeholder {
+  opacity: inherit; /* 1 */
+}
+:-ms-input-placeholder {
+  color: inherit; /* 1 */
+};

src/_hidden.scss

@@ -4,5 +4,6 @@
  *    (from normalize.css).
  */
 [hidden],
-template
-  display: none /* 1 */
+template {
+  display: none; /* 1 */
+}

src/_links.sass

@@ -1,12 +0,0 @@
-/**
- * 1. Fully reset link styling.
- * 2. Remove gray background color from active links in IE 10
- *    (from normalize.css).
- */
-a
-  color: inherit /* 1 */
-  text-decoration: none /* 1 */
-  background-color: transparent /* 2 */
-
-  &:link, &:active, &:visited
-    color: inherit /* 1 */

src/_links.scss

@@ -0,0 +1,14 @@
+/**
+ * 1. Fully reset link styling.
+ * 2. Remove gray background color from active links in IE 10
+ *    (from normalize.css).
+ */
+a {
+  color: inherit; /* 1 */
+  text-decoration: none; /* 1 */
+  background-color: transparent; /* 2 */
+
+  &:link, &:active, &:visited {
+    color: inherit; /* 1 */
+  }
+}

src/_lists.sass

@@ -1,7 +0,0 @@
-ul, ol
-  margin: 0
-  padding: 0
-  list-style-type: none
-
-  ol, ul
-    padding: 0

src/_lists.scss

@@ -0,0 +1,9 @@
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  ol, ul {
+    padding: 0;
+  }
+}

src/_responsive.sass

@@ -1,13 +0,0 @@
-html
-  width: 100%
-  overflow-x: hidden
-
-input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, meter, progress
-  width: 100%
-
-img, video, object, embed, iframe
-  height: auto
-  max-width: 100%
-
-audio
-  max-width: 100%

src/_responsive.scss

@@ -0,0 +1,17 @@
+html {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, meter, progress {
+  width: 100%;
+}
+
+img, video, object, embed, iframe {
+  height: auto;
+  max-width: 100%;
+}
+
+audio {
+  max-width: 100%;
+}

src/_tables.sass

@@ -1,9 +0,0 @@
-table
-  border-collapse: collapse
-  border-spacing: 0
-
-td, th
-  padding: 0
-
-caption
-  text-align: inherit

src/_tables.scss

@@ -0,0 +1,12 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td, th {
+  padding: 0;
+}
+
+caption {
+  text-align: inherit;
+}

src/_typography.sass

@@ -1,85 +0,0 @@
-/**
- * 1. Prevent iOS and IE text size adjust after device orientation change
- *    without disabling user zoom.
- */
-html
-  -ms-text-size-adjust: 100% /* 1 */
-  -webkit-text-size-adjust: 100% /* 1 */
-
-/**
- * 1. Remove all styling from `h1-6` elements.
- */
-h1, h2, h3, h4, h5, h6
-  margin: 0 /* 1 */
-  font-size: inherit /* 1 */
-  font-weight: inherit /* 1 */
-
-/**
- * 1. Remove extra margin around these elements.
- */
-p, dl, dd, pre, figure, blockquote
-  margin: 0 /* 1 */
-
-/**
- * 1. Ensure that these elements inherit font-style.
- */
-i, cite, em, var, address, dfn
-  font-style: inherit /* 1 */
-
-/**
- * 1. Ensure that these elements inherit text-decoration.
- */
-u, s, strike, del, ins
-  text-decoration: inherit /* 1 */
-
-/**
- * 1. Ensure that these elements inherit font-weight.
- */
-dfn, strong, th, b
-  font-weight: inherit /* 1 */
-
-small
-  font-size: inherit
-
-/**
- * 1. Ensure that font-family is inherited.
- * 2. Inherit font size in IE.
- */
-tt, code, kbd, samp, pre
-  font-family: inherit /* 1 */
-  font-size: inherit /* 2 */
-
-/**
- * 1. Remove quotation marks.
- */
-q
-  &::before, &::after
-    content: '' /* 1 */
-    content: none /* 1 */
-blockquote, q
-  quotes: none /* 1 */
-
-/**
- * 1. Reset styling for `mark` elements.
- */
-mark
-  background-color: inherit /* 1 */
-  color: inherit /* 1 */
-
-hr
-  box-sizing: content-box /* 1 */
-  height: 0 /* 1 */
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers
- * (from normalize.css).
- */
-sub, sup
-  font-size: 75%
-  line-height: 0
-  position: relative
-  vertical-align: baseline
-sup
-  top: -0.5em
-sub
-  bottom: -0.25em

src/_typography.scss

@@ -0,0 +1,101 @@
+/**
+ * 1. Prevent iOS and IE text size adjust after device orientation change
+ *    without disabling user zoom.
+ */
+html {
+  -ms-text-size-adjust: 100%; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 1 */
+}
+
+/**
+ * 1. Remove all styling from `h1-6` elements.
+ */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0; /* 1 */
+  font-size: inherit; /* 1 */
+  font-weight: inherit; /* 1 */
+}
+
+/**
+ * 1. Remove extra margin around these elements.
+ */
+p, dl, dd, pre, figure, blockquote {
+  margin: 0; /* 1 */
+}
+
+/**
+ * 1. Ensure that these elements inherit font-style.
+ */
+i, cite, em, var, address, dfn {
+  font-style: inherit; /* 1 */
+}
+
+/**
+ * 1. Ensure that these elements inherit text-decoration.
+ */
+u, s, strike, del, ins {
+  text-decoration: inherit; /* 1 */
+}
+
+/**
+ * 1. Ensure that these elements inherit font-weight.
+ */
+dfn, strong, th, b {
+  font-weight: inherit; /* 1 */
+}
+
+small {
+  font-size: inherit;
+}
+
+/**
+ * 1. Ensure that font-family is inherited.
+ * 2. Inherit font size in IE.
+ */
+tt, code, kbd, samp, pre {
+  font-family: inherit; /* 1 */
+  font-size: inherit; /* 2 */
+}
+
+/**
+ * 1. Remove quotation marks.
+ */
+q {
+  &::before, &::after {
+    content: ""; /* 1 */
+    content: none; /* 1 */
+  }
+}
+blockquote, q {
+  quotes: none; /* 1 */
+}
+
+/**
+ * 1. Reset styling for `mark` elements.
+ */
+mark {
+  background-color: inherit; /* 1 */
+  color: inherit; /* 1 */
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers
+ * (from normalize.css).
+ */
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}

src/total-reset.sass

@@ -1,19 +0,0 @@
-@import blocks
-@import box-sizing
-@import links
-@import lists
-@import typography
-@import embedded-content
-@import accessibility
-@import tables
-@import responsive
-@import form-elements
-@import hidden
-
-/**
- * 1. Remove default padding on body.
- * 2. Normalize line-height.
- */
-body
-  margin: 0 /* 1 */
-  line-height: 1 /* 2 */

src/total-reset.scss

@@ -0,0 +1,20 @@
+@import "blocks";
+@import "box-sizing";
+@import "links";
+@import "lists";
+@import "typography";
+@import "embedded-content";
+@import "accessibility";
+@import "tables";
+@import "responsive";
+@import "form-elements";
+@import "hidden";
+
+/**
+ * 1. Remove default padding on body.
+ * 2. Normalize line-height.
+ */
+body {
+  margin: 0; /* 1 */
+  line-height: 1; /* 2 */
+}