diff --git a/changelog_unreleased/css/pr-7933.md b/changelog_unreleased/css/pr-7933.md
index dda672086..9f7d24878 100644
--- a/changelog_unreleased/css/pr-7933.md
+++ b/changelog_unreleased/css/pr-7933.md
@@ -1,4 +1,4 @@
-#### [BREAKING] Add the pure `css` parser (#7933 by @fisker)
+#### [BREAKING] Add the pure `css` parser (#7933, #9092, #9093 by @fisker)
 
 Previously, when `--parser=css` was passed, Prettier tried to parse the content using `postcss-scss` and `postcss-less`. This caused confusion, and made syntax errors difficult to spot. Now `--parser=css` works only with the vanilla CSS syntax.
 
diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js
index c5a47ea75..fe94c238d 100644
--- a/src/language-css/parser-postcss.js
+++ b/src/language-css/parser-postcss.js
@@ -6,7 +6,6 @@ const { hasPragma } = require("./pragma");
 const {
   hasSCSSInterpolation,
   hasStringOrFunction,
-  isSCSS,
   isSCSSNestedPropertyNode,
   isSCSSVariable,
   stringifyNode,
@@ -40,7 +39,7 @@ function parseValueNode(valueNode, options) {
     const node = nodes[i];
 
     if (
-      isSCSS(options.parser, node.value) &&
+      options.parser === "scss" &&
       node.type === "number" &&
       node.unit === ".." &&
       node.value[node.value.length - 1] === "."
@@ -80,7 +79,8 @@ function parseValueNode(valueNode, options) {
       // Stringify if the value parser can't handle the content.
       if (
         hasSCSSInterpolation(groupList) ||
-        (!hasStringOrFunction(groupList) && !isSCSSVariable(groupList[0]))
+        (!hasStringOrFunction(groupList) &&
+          !isSCSSVariable(groupList[0], options))
       ) {
         const stringifiedContent = stringifyNode({
           groups: node.group.groups,
@@ -370,7 +370,7 @@ function parseNestedCSS(node, options) {
       }
 
       // Check on SCSS nested property
-      if (isSCSSNestedPropertyNode(node)) {
+      if (isSCSSNestedPropertyNode(node, options)) {
         node.isSCSSNesterProperty = true;
       }
 
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index 9eb0fde25..d9825936d 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -38,7 +38,6 @@ const {
   insideURLFunctionInImportAtRuleNode,
   isKeyframeAtRuleKeywords,
   isWideKeywords,
-  isSCSS,
   isLastNode,
   isSCSSControlDirectiveNode,
   isDetachedRulesetDeclarationNode,
@@ -277,7 +276,7 @@ function genericPrint(path, options, print) {
               concat([
                 " ",
                 path.call(print, "value"),
-                isSCSSControlDirectiveNode(node)
+                isSCSSControlDirectiveNode(node, options)
                   ? hasParensAroundNode(node)
                     ? " "
                     : line
@@ -289,7 +288,7 @@ function genericPrint(path, options, print) {
           : "",
         node.nodes
           ? concat([
-              isSCSSControlDirectiveNode(node)
+              isSCSSControlDirectiveNode(node, options)
                 ? ""
                 : (node.selector &&
                     !node.selector.nodes &&
@@ -537,7 +536,8 @@ function genericPrint(path, options, print) {
           declAncestorProp.startsWith("grid-template"));
       const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
       const isControlDirective =
-        atRuleAncestorNode && isSCSSControlDirectiveNode(atRuleAncestorNode);
+        atRuleAncestorNode &&
+        isSCSSControlDirectiveNode(atRuleAncestorNode, options);
 
       const printed = path.map(print, "groups");
       const parts = [];
@@ -856,7 +856,7 @@ function genericPrint(path, options, print) {
         return group(indent(fill(res)));
       }
 
-      const isSCSSMapItem = isSCSSMapItemNode(path);
+      const isSCSSMapItem = isSCSSMapItemNode(path, options);
 
       const lastItem = node.groups[node.groups.length - 1];
       const isLastItemComment = lastItem && lastItem.type === "value-comment";
@@ -895,7 +895,7 @@ function genericPrint(path, options, print) {
           ),
           ifBreak(
             !isLastItemComment &&
-              isSCSS(options.parser, options.originalText) &&
+              options.parser === "scss" &&
               isSCSSMapItem &&
               shouldPrintComma(options)
               ? ","
diff --git a/src/language-css/utils.js b/src/language-css/utils.js
index b272028cc..1e02bbbc4 100644
--- a/src/language-css/utils.js
+++ b/src/language-css/utils.js
@@ -86,16 +86,13 @@ function hasStringOrFunction(groupList) {
   return false;
 }
 
-function isSCSS(parser, text) {
-  const hasExplicitParserChoice = parser === "less" || parser === "scss";
-  const IS_POSSIBLY_SCSS = /(\w\s*:\s*[^:}]+|#){|@import[^\n]+(?:url|,)/;
-  return hasExplicitParserChoice
-    ? parser === "scss"
-    : IS_POSSIBLY_SCSS.test(text);
-}
-
-function isSCSSVariable(node) {
-  return !!(node && node.type === "word" && node.value.startsWith("$"));
+function isSCSSVariable(node, options) {
+  return (
+    options.parser === "scss" &&
+    node &&
+    node.type === "word" &&
+    node.value.startsWith("$")
+  );
 }
 
 function isWideKeywords(value) {
@@ -256,14 +253,19 @@ function isRelationalOperatorNode(node) {
   );
 }
 
-function isSCSSControlDirectiveNode(node) {
+function isSCSSControlDirectiveNode(node, options) {
   return (
+    options.parser === "scss" &&
     node.type === "css-atrule" &&
     ["if", "else", "for", "each", "while"].includes(node.name)
   );
 }
 
-function isSCSSNestedPropertyNode(node) {
+function isSCSSNestedPropertyNode(node, options) {
+  if (options.parser !== "scss") {
+    return false;
+  }
+
   /* istanbul ignore next */
   if (!node.selector) {
     return false;
@@ -341,7 +343,11 @@ function isKeyValuePairInParenGroupNode(node) {
   );
 }
 
-function isSCSSMapItemNode(path) {
+function isSCSSMapItemNode(path, options) {
+  if (options.parser !== "scss") {
+    return false;
+  }
+
   const node = path.getValue();
 
   // Ignore empty item (i.e. `$key: ()`)
@@ -469,7 +475,6 @@ module.exports = {
   insideURLFunctionInImportAtRuleNode,
   isKeyframeAtRuleKeywords,
   isWideKeywords,
-  isSCSS,
   isSCSSVariable,
   isLastNode,
   isSCSSControlDirectiveNode,
diff --git a/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap
index 55209b323..5495e1fe0 100644
--- a/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap
@@ -919,301 +919,6 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`each.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@each $animal in puma, sea-slug, egret, salamander {}
-@each $animal in puma,sea-slug,egret,salamander{}
-@each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
-@each $animal in
-    puma, sea-slug, egret, salamander {}
-@each
-    $animal
-    in
-    puma
-    ,
-    sea-slug
-    ,
-    egret
-    ,
-    salamander
-    {
-    }
-@each
-$animal
-in
-puma
-,
-sea-slug
-,
-egret
-,
-salamander
-{
-}
-@each
-
-$animal
-
-in
-
-puma
-
-,
-
-sea-slug
-
-,
-
-egret
-
-,
-
-salamander
-
-{
-
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
-@each $animal in((puma),(sea-slug),(egret),(salamander)){}
-@each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
-@each $animal
-    in ((puma), (sea-slug), (egret), (salamander)) {}
-@each
-    $animal
-    in (
-        (puma),
-        (sea-slug),
-        (egret),
-        (salamander)
-    ) {  }
-@each
-    $animal
-    in
-    (
-    (
-    puma
-    )
-    ,
-    (
-    sea-slug
-    )
-    ,
-    (
-    egret
-    )
-    ,
-    (
-    salamander
-    )
-    )
-    {
-    }
-@each
-
-    $animal
-
-    in
-
-    (
-
-    (
-
-    puma
-
-    )
-
-    ,
-
-    (
-
-    sea-slug
-
-    )
-
-    ,
-
-    (
-
-    egret
-
-    )
-
-    ,
-
-    (
-
-    salamander
-
-    )
-
-    )
-
-    {
-
-    }
-@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-@each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-@each $animal, $color, $cursor in
-    (puma, black, default),
-    (sea-slug, blue, pointer),
-    (egret, white, move) {}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-@each $element,$size in(h1:20px,h2:16px,h3:14px){}
-@each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-@each $element,
-    $size in (h1: 20px, h2: 16px, h3: 14px) {}
-@each
-    $element,
-    $size
-    in
-    (
-    h1
-    :
-    20px
-    ,
-    h2
-    :
-    16px
-    ,
-    h3
-    :
-    14px
-    )
-    {
-    }
-@each
-$element,
-$size
-in
-(
-h1
-:
-20px
-,
-h2
-:
-16px
-,
-h3
-:
-14px
-)
-{
-}
-@each
-$element,
-
-$size
-
-in
-
-(
-
-h1
-
-:
-
-20px
-
-,
-
-h2
-
-:
-
-16px
-
-,
-
-h3
-
-:
-
-14px
-
-)
-
-{
-
-}
-
-=====================================output=====================================
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal, $color, $cursor in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $animal, $color, $cursor in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $animal, $color, $cursor in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-    in puma,
-  sea-slug, egret, salamander
-{
-}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-    in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in(h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-
-================================================================================
-`;
-
 exports[`extend.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -1699,116 +1404,6 @@ nice-style
 ================================================================================
 `;
 
-exports[`for.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@for $i from 1 through 8 {}
-@for $i from 1 through 8{}
-@for  $i  from  1  through  8  {}
-@for  $i
-from
-1
-through
-8
-{}
-@for
-$i
-from
-1
-through
-8
-{}
-@for
-$i
-from
-1
-through
-8
-{}
-@for
-
-$i
-
-from
-
-1
-
-through
-
-8
-
-{}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-@for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-
-=====================================output=====================================
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from 1
-  through 5
-{
-}
-@for $i
-  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  through 5
-{
-}
-@for $i
-  from 1
-  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from ($var1 + $var1)
-  through ($var-2 + $var-2)
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from (
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 +
-      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  )
-  through (
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 +
-      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-  )
-{
-}
-
-================================================================================
-`;
-
 exports[`function.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -1942,293 +1537,6 @@ $args
 ================================================================================
 `;
 
-exports[`if-else.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@if $media == phonePortrait {
-    $k: .15625;
-} @else if $media == phoneLandscape {
-    $k: .08803;
-} @else if $media == tabletPortrait {
-    $k: .065106;
-}
-p {
-    @if $type == ocean {}
-    @if $type==ocean{}
-    @if  $type  ==  ocean  {}
-    @if $type
-        == ocean {}
-    @if
-    $type
-    ==
-    ocean
-    {
-    }
-    @if
-
-    $type
-
-    ==
-
-    ocean
-
-    {
-
-    }
-    @if (($type) == (ocean)) {}
-    @if (($type)==(ocean)){}
-    @if  (  (  $type  )  ==  (  ocean  )  )  {}
-    @if (($type)
-        == (ocean)) {}
-    @if
-    (
-    (
-    $type
-    )
-    ==
-    (
-    ocean
-    )
-    )
-    {
-    }
-    @if
-
-    (
-
-    (
-
-    $type
-
-    )
-
-    ==
-
-    (
-
-    ocean
-
-    )
-
-    )
-
-    {
-
-    }
-    @if $type == ocean {
-        color: blue;
-    } @else if $type == matador {
-        color: red;
-    } @else if $type == monster {
-        color: green;
-    } @else {
-        color: black;
-    }
-    @if $type == ocean {
-    } @else if $type == matador {
-    }
-    @if $type==ocean{}@else if $type==matador{}
-    @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-    @if $type == ocean {}
-    @else if $type == matador {}
-    @if
-        $type == ocean {}
-    @else if
-        $type == matador {}
-    @if
-        $type
-        ==
-        ocean
-        {
-        }
-    @else
-        if
-        $type
-        ==
-        matador
-        {
-        }
-    @if
-
-        $type
-
-        ==
-
-        ocean
-
-        {
-
-        }
-
-    @else
-
-        if
-
-        $type
-
-        ==
-
-        matador
-
-        {
-
-        }
-    @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        color: blue;
-    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        color: red;
-    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        color: green;
-    } @else {
-        color: black;
-    }
-    @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-    @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-    @if (str-slice($item, 0, 1) == ":") {}
-    @if (str-slice($item, 0, 3) == " : ") {}
-    @if ($type == ocean) {} @else if ($type == matador) {} @else {}
-}
-
-=====================================output=====================================
-@if $media == phonePortrait {
-  $k: 0.15625;
-} @else if $media == phoneLandscape {
-  $k: 0.08803;
-} @else if $media == tabletPortrait {
-  $k: 0.065106;
-}
-p {
-  @if $type == ocean {
-  }
-  @if $type==ocean {
-  }
-  @if $type == ocean {
-  }
-  @if $type == ocean {
-  }
-  @if $type == ocean {
-  }
-  @if $type == ocean {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) ==(ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if $type == ocean {
-    color: blue;
-  } @else if $type == matador {
-    color: red;
-  } @else if $type == monster {
-    color: green;
-  } @else {
-    color: black;
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type==ocean {
-  } @else if $type==matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
-  {
-    color: blue;
-  } @else if
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
-  {
-    color: red;
-  } @else if
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
-  {
-    color: green;
-  } @else {
-    color: black;
-  }
-  @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
-  }
-  @if $very-very-very-very-very-very-long-var ==
-    0 and
-    $very-very-very-long-var ==
-    0
-  {
-  }
-  @if $very-very-very-very-very-very-very-very-very-very-very-long-var ==
-    0 and
-    $very-very-very-very-very-very-very-very-very-very-very-long-var ==
-    0
-  {
-  }
-  @if $base-font-size !=
-    16px or
-    $base-line-height !=
-    24px or
-    $base-unit !=
-    "em" or
-    $h1-font-size !=
-    2 *
-    $base-font-size or
-    $h2-font-size !=
-    1.5 *
-    $base-font-size or
-    $h3-font-size !=
-    1.17 *
-    $base-font-size or
-    $h4-font-size !=
-    1 *
-    $base-font-size or
-    $h5-font-size !=
-    0.83 *
-    $base-font-size or
-    $h6-font-size !=
-    0.67 *
-    $base-font-size or
-    $indent-amount !=
-    40px
-  {
-  }
-  @if (str-slice($item, 0, 1) == ":") {
-  }
-  @if (str-slice($item, 0, 3) == " : ") {
-  }
-  @if ($type == ocean) {
-  } @else if ($type == matador) {
-  } @else {
-  }
-}
-
-================================================================================
-`;
-
 exports[`import.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -2413,228 +1721,6 @@ $family: unquote("Droid+Sans");
 ================================================================================
 `;
 
-exports[`include.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px,2px,$arg2:10,2px 4px 6px);
-@include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
-@include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
-@include mix(
-    1px,
-    2px,
-    $arg2: 10,
-    2px  4px  6px
-);
-@include
-mix(
-    1px,
-    2px,
-    $arg2: 10,
-    2px  4px  6px
-);
-@include
-mix
-(
-1px
-,
-2px
-,
-$arg2
-:
-10
-,
-2px
-4px
-6px
-)
-;
-@include
-
-mix
-
-(
-
-1px
-
-,
-
-2px
-
-,
-
-$arg2
-
-:
-
-10
-
-,
-
-2px
-
-4px
-
-6px
-
-)
-
-;
-@include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-a {
-    @include global-variable-overriding;
-    @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-    @include apply-to-ie6-only {}
-    @include apply-to-ie6-only{}
-    @include apply-to-ie6-only
-        {}
-    @include
-        apply-to-ie6-only
-        {
-        }
-    @include
-
-        apply-to-ie6-only
-
-        {
-
-        }
-}
-
-a {
-@include section-type-1(
-$header: (margin: 0 0 $margin-base, text-align: left),
-$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-);
-}
-
-a {
-@include item-spotlight-properties-transition(
-"-title",
-(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
-);
-}
-
-a {
-@include item-spotlight-properties-transition(
-"-title",
-(
-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-border-color: $brand-primary
-)
-);
-}
-
-a {
-@include item-spotlight-properties-transition(
-"-title",
-(
-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
-)
-);
-}
-
-=====================================output=====================================
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
-    1px,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
-    2px,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
-    10,
-  2px 4px 6px
-);
-a {
-  @include global-variable-overriding;
-  @include mix(
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
-      1px,
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
-      2px,
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
-      10,
-    2px 4px 6px
-  );
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-}
-
-a {
-  @include section-type-1(
-    $header: (
-      margin: 0 0 $margin-base,
-      text-align: left,
-    ),
-    $decoration: (
-      type: base,
-      margin: 0 auto -1px 0,
-      primary-color: $brand-primary,
-      secondary-color: $gray-light,
-    ),
-    $title: (
-      margin: 0 0 $margin-small,
-      color: false,
-      font-size: $font-size-h3,
-      font-weight: false,
-      line-height: $line-height-h3,
-    )
-  );
-}
-
-a {
-  @include item-spotlight-properties-transition(
-    "-title",
-    (
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-    )
-  );
-}
-
-a {
-  @include item-spotlight-properties-transition(
-    "-title",
-    (
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-      border-color: $brand-primary,
-    )
-  );
-}
-
-a {
-  @include item-spotlight-properties-transition(
-    "-title",
-    (
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-      border-color:
-        $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value,
-    )
-  );
-}
-
-================================================================================
-`;
-
 exports[`keyframes.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -4669,198 +3755,3 @@ max-width
 
 ================================================================================
 `;
-
-exports[`while.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@while $i > 0 {}
-@while $i>0{}
-@while  $i  >  0  {}
-@while $i
-    >
-    0
-    {}
-@while
-    $i
-    >
-    0
-    {}
-@while
-$i
->
-0
-{
-}
-@while
-
-$i
-
->
-
-0
-
-{
-
-}
-@while ($i > 0) {}
-@while ($i>0){}
-@while ( $i > 0 ) {}
-@while  (  $i  >  0  )  {}
-@while (
-    $i > 0
-) {}
-@while
-    ($i > 0) {}
-@while
-(
-$i
->
-0
-)
-{
-}
-@while
-
-(
-
-$i
-
->
-
-0
-
-)
-
-{
-
-}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
-@while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-@while (($i) > (0)) {}
-@while (($i)>(0)){}
-@while  (  (  $i  )  >  (  0  )  )  {}
-@while (($i)
-    >
-    (0)
-) {}
-@while
-(
-(
-$i
-)
->
-(
-0
-)
-)
-{
-}
-@while
-
-(
-
-(
-
-$i
-
-)
-
->
-
-(
-
-0
-
-)
-
-)
-
-{
-
-}
-@while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-@while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-
-=====================================output=====================================
-@while $i > 0 {
-}
-@while $i>0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while ($i > 0) {
-}
-@while ($i>0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-  1
-{
-}
-@while 1 >
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-{
-}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-  $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-{
-}
-@while (($i) > (0)) {
-}
-@while (($i) >(0)) {
-}
-@while (($i) > (0)) {
-}
-@while (($i) > (0)) {
-}
-@while (($i) > (0)) {
-}
-@while (($i) > (0)) {
-}
-@while (
-  $very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1
-) {
-}
-@while (
-  1 >
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-) {
-}
-@while (
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-    1
-) {
-}
-@while (
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-    $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-) {
-}
-
-================================================================================
-`;
diff --git a/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap b/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap
index 05ccdfdf1..6943d7409 100644
--- a/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap
@@ -107,7 +107,7 @@ printWidth: 80
 
 .validUnquotedUrlsThatAreParsedBySass {
   background: url($foo);
-  background: url($foo + $bar);
+  background: url($foo+$bar);
   background: url($foo*3);
   background: url($foo/$bar);
 }
diff --git a/tests/scss/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/scss/atrule/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..e78630a3f
--- /dev/null
+++ b/tests/scss/atrule/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,1110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`each.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@each $animal in puma, sea-slug, egret, salamander {}
+@each $animal in puma,sea-slug,egret,salamander{}
+@each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
+@each $animal in
+    puma, sea-slug, egret, salamander {}
+@each
+    $animal
+    in
+    puma
+    ,
+    sea-slug
+    ,
+    egret
+    ,
+    salamander
+    {
+    }
+@each
+$animal
+in
+puma
+,
+sea-slug
+,
+egret
+,
+salamander
+{
+}
+@each
+
+$animal
+
+in
+
+puma
+
+,
+
+sea-slug
+
+,
+
+egret
+
+,
+
+salamander
+
+{
+
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
+@each $animal in((puma),(sea-slug),(egret),(salamander)){}
+@each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
+@each $animal
+    in ((puma), (sea-slug), (egret), (salamander)) {}
+@each
+    $animal
+    in (
+        (puma),
+        (sea-slug),
+        (egret),
+        (salamander)
+    ) {  }
+@each
+    $animal
+    in
+    (
+    (
+    puma
+    )
+    ,
+    (
+    sea-slug
+    )
+    ,
+    (
+    egret
+    )
+    ,
+    (
+    salamander
+    )
+    )
+    {
+    }
+@each
+
+    $animal
+
+    in
+
+    (
+
+    (
+
+    puma
+
+    )
+
+    ,
+
+    (
+
+    sea-slug
+
+    )
+
+    ,
+
+    (
+
+    egret
+
+    )
+
+    ,
+
+    (
+
+    salamander
+
+    )
+
+    )
+
+    {
+
+    }
+@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
+@each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
+@each $animal, $color, $cursor in
+    (puma, black, default),
+    (sea-slug, blue, pointer),
+    (egret, white, move) {}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
+@each $element,$size in(h1:20px,h2:16px,h3:14px){}
+@each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
+@each $element,
+    $size in (h1: 20px, h2: 16px, h3: 14px) {}
+@each
+    $element,
+    $size
+    in
+    (
+    h1
+    :
+    20px
+    ,
+    h2
+    :
+    16px
+    ,
+    h3
+    :
+    14px
+    )
+    {
+    }
+@each
+$element,
+$size
+in
+(
+h1
+:
+20px
+,
+h2
+:
+16px
+,
+h3
+:
+14px
+)
+{
+}
+@each
+$element,
+
+$size
+
+in
+
+(
+
+h1
+
+:
+
+20px
+
+,
+
+h2
+
+:
+
+16px
+
+,
+
+h3
+
+:
+
+14px
+
+)
+
+{
+
+}
+
+=====================================output=====================================
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal, $color, $cursor in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $animal, $color, $cursor in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $animal, $color, $cursor in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+    in puma,
+  sea-slug, egret, salamander
+{
+}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+    in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in(h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+
+================================================================================
+`;
+
+exports[`for.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@for $i from 1 through 8 {}
+@for $i from 1 through 8{}
+@for  $i  from  1  through  8  {}
+@for  $i
+from
+1
+through
+8
+{}
+@for
+$i
+from
+1
+through
+8
+{}
+@for
+$i
+from
+1
+through
+8
+{}
+@for
+
+$i
+
+from
+
+1
+
+through
+
+8
+
+{}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
+@for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
+@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
+
+=====================================output=====================================
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from 1
+  through 5
+{
+}
+@for $i
+  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  through 5
+{
+}
+@for $i
+  from 1
+  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from ($var1 + $var1)
+  through ($var-2 + $var-2)
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from (
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 +
+      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  )
+  through (
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 +
+      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+  )
+{
+}
+
+================================================================================
+`;
+
+exports[`if-else.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@if $media == phonePortrait {
+    $k: .15625;
+} @else if $media == phoneLandscape {
+    $k: .08803;
+} @else if $media == tabletPortrait {
+    $k: .065106;
+}
+p {
+    @if $type == ocean {}
+    @if $type==ocean{}
+    @if  $type  ==  ocean  {}
+    @if $type
+        == ocean {}
+    @if
+    $type
+    ==
+    ocean
+    {
+    }
+    @if
+
+    $type
+
+    ==
+
+    ocean
+
+    {
+
+    }
+    @if (($type) == (ocean)) {}
+    @if (($type)==(ocean)){}
+    @if  (  (  $type  )  ==  (  ocean  )  )  {}
+    @if (($type)
+        == (ocean)) {}
+    @if
+    (
+    (
+    $type
+    )
+    ==
+    (
+    ocean
+    )
+    )
+    {
+    }
+    @if
+
+    (
+
+    (
+
+    $type
+
+    )
+
+    ==
+
+    (
+
+    ocean
+
+    )
+
+    )
+
+    {
+
+    }
+    @if $type == ocean {
+        color: blue;
+    } @else if $type == matador {
+        color: red;
+    } @else if $type == monster {
+        color: green;
+    } @else {
+        color: black;
+    }
+    @if $type == ocean {
+    } @else if $type == matador {
+    }
+    @if $type==ocean{}@else if $type==matador{}
+    @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
+    @if $type == ocean {}
+    @else if $type == matador {}
+    @if
+        $type == ocean {}
+    @else if
+        $type == matador {}
+    @if
+        $type
+        ==
+        ocean
+        {
+        }
+    @else
+        if
+        $type
+        ==
+        matador
+        {
+        }
+    @if
+
+        $type
+
+        ==
+
+        ocean
+
+        {
+
+        }
+
+    @else
+
+        if
+
+        $type
+
+        ==
+
+        matador
+
+        {
+
+        }
+    @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: blue;
+    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: red;
+    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: green;
+    } @else {
+        color: black;
+    }
+    @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
+    @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
+    @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
+    @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
+    @if (str-slice($item, 0, 1) == ":") {}
+    @if (str-slice($item, 0, 3) == " : ") {}
+    @if ($type == ocean) {} @else if ($type == matador) {} @else {}
+}
+
+=====================================output=====================================
+@if $media == phonePortrait {
+  $k: 0.15625;
+} @else if $media == phoneLandscape {
+  $k: 0.08803;
+} @else if $media == tabletPortrait {
+  $k: 0.065106;
+}
+p {
+  @if $type == ocean {
+  }
+  @if $type==ocean {
+  }
+  @if $type == ocean {
+  }
+  @if $type == ocean {
+  }
+  @if $type == ocean {
+  }
+  @if $type == ocean {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) ==(ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if $type == ocean {
+    color: blue;
+  } @else if $type == matador {
+    color: red;
+  } @else if $type == monster {
+    color: green;
+  } @else {
+    color: black;
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type==ocean {
+  } @else if $type==matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+  {
+    color: blue;
+  } @else if
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+  {
+    color: red;
+  } @else if
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+  {
+    color: green;
+  } @else {
+    color: black;
+  }
+  @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
+  }
+  @if $very-very-very-very-very-very-long-var ==
+    0 and
+    $very-very-very-long-var ==
+    0
+  {
+  }
+  @if $very-very-very-very-very-very-very-very-very-very-very-long-var ==
+    0 and
+    $very-very-very-very-very-very-very-very-very-very-very-long-var ==
+    0
+  {
+  }
+  @if $base-font-size !=
+    16px or
+    $base-line-height !=
+    24px or
+    $base-unit !=
+    "em" or
+    $h1-font-size !=
+    2 *
+    $base-font-size or
+    $h2-font-size !=
+    1.5 *
+    $base-font-size or
+    $h3-font-size !=
+    1.17 *
+    $base-font-size or
+    $h4-font-size !=
+    1 *
+    $base-font-size or
+    $h5-font-size !=
+    0.83 *
+    $base-font-size or
+    $h6-font-size !=
+    0.67 *
+    $base-font-size or
+    $indent-amount !=
+    40px
+  {
+  }
+  @if (str-slice($item, 0, 1) == ":") {
+  }
+  @if (str-slice($item, 0, 3) == " : ") {
+  }
+  @if ($type == ocean) {
+  } @else if ($type == matador) {
+  } @else {
+  }
+}
+
+================================================================================
+`;
+
+exports[`include.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px,2px,$arg2:10,2px 4px 6px);
+@include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
+@include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
+@include mix(
+    1px,
+    2px,
+    $arg2: 10,
+    2px  4px  6px
+);
+@include
+mix(
+    1px,
+    2px,
+    $arg2: 10,
+    2px  4px  6px
+);
+@include
+mix
+(
+1px
+,
+2px
+,
+$arg2
+:
+10
+,
+2px
+4px
+6px
+)
+;
+@include
+
+mix
+
+(
+
+1px
+
+,
+
+2px
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+2px
+
+4px
+
+6px
+
+)
+
+;
+@include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
+a {
+    @include global-variable-overriding;
+    @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
+    @include apply-to-ie6-only {}
+    @include apply-to-ie6-only{}
+    @include apply-to-ie6-only
+        {}
+    @include
+        apply-to-ie6-only
+        {
+        }
+    @include
+
+        apply-to-ie6-only
+
+        {
+
+        }
+}
+
+a {
+@include section-type-1(
+$header: (margin: 0 0 $margin-base, text-align: left),
+$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
+$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $brand-primary
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+)
+);
+}
+
+=====================================output=====================================
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
+    1px,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
+    2px,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
+    10,
+  2px 4px 6px
+);
+a {
+  @include global-variable-overriding;
+  @include mix(
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
+      1px,
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
+      2px,
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
+      10,
+    2px 4px 6px
+  );
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+}
+
+a {
+  @include section-type-1(
+    $header: (
+      margin: 0 0 $margin-base,
+      text-align: left,
+    ),
+    $decoration: (
+      type: base,
+      margin: 0 auto -1px 0,
+      primary-color: $brand-primary,
+      secondary-color: $gray-light,
+    ),
+    $title: (
+      margin: 0 0 $margin-small,
+      color: false,
+      font-size: $font-size-h3,
+      font-weight: false,
+      line-height: $line-height-h3,
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+      border-color: $brand-primary,
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+      border-color:
+        $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value,
+    )
+  );
+}
+
+================================================================================
+`;
+
+exports[`while.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@while $i > 0 {}
+@while $i>0{}
+@while  $i  >  0  {}
+@while $i
+    >
+    0
+    {}
+@while
+    $i
+    >
+    0
+    {}
+@while
+$i
+>
+0
+{
+}
+@while
+
+$i
+
+>
+
+0
+
+{
+
+}
+@while ($i > 0) {}
+@while ($i>0){}
+@while ( $i > 0 ) {}
+@while  (  $i  >  0  )  {}
+@while (
+    $i > 0
+) {}
+@while
+    ($i > 0) {}
+@while
+(
+$i
+>
+0
+)
+{
+}
+@while
+
+(
+
+$i
+
+>
+
+0
+
+)
+
+{
+
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
+@while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
+@while (($i) > (0)) {}
+@while (($i)>(0)){}
+@while  (  (  $i  )  >  (  0  )  )  {}
+@while (($i)
+    >
+    (0)
+) {}
+@while
+(
+(
+$i
+)
+>
+(
+0
+)
+)
+{
+}
+@while
+
+(
+
+(
+
+$i
+
+)
+
+>
+
+(
+
+0
+
+)
+
+)
+
+{
+
+}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
+@while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
+
+=====================================output=====================================
+@while $i > 0 {
+}
+@while $i>0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while ($i > 0) {
+}
+@while ($i>0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+  1
+{
+}
+@while 1 >
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+{
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+  $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+{
+}
+@while (($i) > (0)) {
+}
+@while (($i) >(0)) {
+}
+@while (($i) > (0)) {
+}
+@while (($i) > (0)) {
+}
+@while (($i) > (0)) {
+}
+@while (($i) > (0)) {
+}
+@while (
+  $very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1
+) {
+}
+@while (
+  1 >
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+) {
+}
+@while (
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+    1
+) {
+}
+@while (
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+    $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+) {
+}
+
+================================================================================
+`;
diff --git a/tests/css/atrule/each.css b/tests/scss/atrule/each.scss
similarity index 100%
rename from tests/css/atrule/each.css
rename to tests/scss/atrule/each.scss
diff --git a/tests/css/atrule/for.css b/tests/scss/atrule/for.scss
similarity index 100%
rename from tests/css/atrule/for.css
rename to tests/scss/atrule/for.scss
diff --git a/tests/css/atrule/if-else.css b/tests/scss/atrule/if-else.scss
similarity index 100%
rename from tests/css/atrule/if-else.css
rename to tests/scss/atrule/if-else.scss
diff --git a/tests/css/atrule/include.css b/tests/scss/atrule/include.scss
similarity index 100%
rename from tests/css/atrule/include.css
rename to tests/scss/atrule/include.scss
diff --git a/tests/scss/atrule/jsfmt.spec.js b/tests/scss/atrule/jsfmt.spec.js
new file mode 100644
index 000000000..539bde086
--- /dev/null
+++ b/tests/scss/atrule/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["scss"]);
diff --git a/tests/css/atrule/while.css b/tests/scss/atrule/while.scss
similarity index 100%
rename from tests/css/atrule/while.css
rename to tests/scss/atrule/while.scss
diff --git a/tests/scss/inline-url/__snapshots__/jsfmt.spec.js.snap b/tests/scss/inline-url/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..f42d0688d
--- /dev/null
+++ b/tests/scss/inline-url/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inline_url.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url('@images');
+  background: url("$images");
+  background: url('/+0PX!/"\\a?~^[]{} $%#');
+  background: url("/+0PX!/'\\a?~^[]{} $%#");
+  background: url(
+    "whitespace-around-string"
+  );
+}
+
+.validUnquotedUrls {
+  background: url(
+    whitespace-around-string
+  );
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo+$bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar,#dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
+
+=====================================output=====================================
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url("@images");
+  background: url("$images");
+  background: url('/+0PX!/"\\a?~^[]{} $%#');
+  background: url("/+0PX!/'\\a?~^[]{} $%#");
+  background: url("whitespace-around-string");
+}
+
+.validUnquotedUrls {
+  background: url(whitespace-around-string);
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=)
+    center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo + $bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar, #dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
+
+================================================================================
+`;
diff --git a/tests/scss/inline-url/inline_url.scss b/tests/scss/inline-url/inline_url.scss
new file mode 100644
index 000000000..4cd15e621
--- /dev/null
+++ b/tests/scss/inline-url/inline_url.scss
@@ -0,0 +1,51 @@
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url('@images');
+  background: url("$images");
+  background: url('/+0PX!/"\a?~^[]{} $%#');
+  background: url("/+0PX!/'\a?~^[]{} $%#");
+  background: url(
+    "whitespace-around-string"
+  );
+}
+
+.validUnquotedUrls {
+  background: url(
+    whitespace-around-string
+  );
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo+$bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar,#dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
diff --git a/tests/scss/inline-url/jsfmt.spec.js b/tests/scss/inline-url/jsfmt.spec.js
new file mode 100644
index 000000000..539bde086
--- /dev/null
+++ b/tests/scss/inline-url/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["scss"]);