diff --git a/autotests/folding/highlight.scss.fold b/autotests/folding/highlight.scss.fold --- a/autotests/folding/highlight.scss.fold +++ b/autotests/folding/highlight.scss.fold @@ -691,3 +691,19 @@ } #sidebar { width: grid-width(5); } + +@mixin unify-parent($child) { + @at-root #{selector-unify(&, $child)} { + @content; + } +} + +:root { + --font-family-sans-serif: #{inspect($font-family-sans-serif)}; + --font-family-monospace: #{inspect($font-family-monospace)}; +} + +div { + background-image: url("/icons/#{$name}.svg"); + font: #{"string"}; +} diff --git a/autotests/html/highlight.scss.html b/autotests/html/highlight.scss.html --- a/autotests/html/highlight.scss.html +++ b/autotests/html/highlight.scss.html @@ -368,7 +368,7 @@ } @mixin firefox-message($selector) { - body.firefox #{$selector}:before { + body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @@ -390,7 +390,7 @@ p { $font-size: 12px; $line-height: 30px; - font: #{$font-size}/#{$line-height}; + font: #{$font-size}/#{$line-height}; } p { @@ -407,7 +407,7 @@ $translucent-red: rgba(255, 0, 0, 0.5); $green: #00ff00; div { - filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}'); + filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}'); } p { cursor: e + -resize; @@ -417,11 +417,11 @@ font-family: sans- + "serif"; } p:before { - content: "I ate #{5 + 10} pies!"; + content: "I ate #{5 + 10} pies!"; } $value: null; p:before { - content: "I ate #{$value} pies!"; + content: "I ate #{$value} pies!"; } p { width: 1em + (2em * 3); @@ -431,13 +431,13 @@ } $name: foo; $attr: border; -p.#{$name} { - #{$attr}-color: blue; +p.#{$name} { + #{$attr}-color: blue; } p { $font-size: 12px; $line-height: 30px; - font: #{$font-size}/#{$line-height}; + font: #{$font-size}/#{$line-height}; } .foo.bar .baz.bang, .bip.qux { @@ -471,7 +471,7 @@ @import url(foo); $family: unquote("Droid+Sans"); -@import url("http://fonts.googleapis.com/css?family=#{$family}"); +@import url("http://fonts.googleapis.com/css?family=#{$family}"); #main { @import "example"; } @@ -494,7 +494,7 @@ $feature: -webkit-min-device-pixel-ratio; $value: 1.5; -@media #{$media} and ($feature: $value) { +@media #{$media} and ($feature: $value) { .sidebar { width: 500px; } @@ -542,22 +542,22 @@ @mixin adjust-location($x, $y) { @if unitless($x) { - @warn "Assuming #{$x} to be in pixels"; + @warn "Assuming #{$x} to be in pixels"; $x: 1px * $x; } @if unitless($y) { - @warn "Assuming #{$y} to be in pixels"; + @warn "Assuming #{$y} to be in pixels"; $y: 1px * $y; } position: relative; left: $x; top: $y; } @mixin adjust-location($x, $y) { @if unitless($x) { - @error "$x may not be unitless, was #{$x}."; + @error "$x may not be unitless, was #{$x}."; } @if unitless($y) { - @error "$y may not be unitless, was #{$y}."; + @error "$y may not be unitless, was #{$y}."; } position: relative; left: $x; top: $y; } @@ -582,34 +582,34 @@ } @for $i from 1 through 3 { - .item-#{$i} { width: 2em * $i; } + .item-#{$i} { width: 2em * $i; } } @each $animal in puma, sea-slug, egret, salamander { - .#{$animal}-icon { - background-image: url('/images/#{$animal}.png'); + .#{$animal}-icon { + background-image: url('/images/#{$animal}.png'); } } @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { - .#{$animal}-icon { - background-image: url('/images/#{$animal}.png'); + .#{$animal}-icon { + background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { - #{$header} { + #{$header} { font-size: $size; } } $i: 6; @while $i > 0 { - .item-#{$i} { width: 2em * $i; } + .item-#{$i} { width: 2em * $i; } $i: $i - 2; } @@ -697,4 +697,20 @@ } #sidebar { width: grid-width(5); } + +@mixin unify-parent($child) { + @at-root #{selector-unify(&, $child)} { + @content; + } +} + +:root { + --font-family-sans-serif: #{inspect($font-family-sans-serif)}; + --font-family-monospace: #{inspect($font-family-monospace)}; +} + +div { + background-image: url("/icons/#{$name}.svg"); + font: #{"string"}; +} diff --git a/autotests/html/review128925-2.scss.html b/autotests/html/review128925-2.scss.html --- a/autotests/html/review128925-2.scss.html +++ b/autotests/html/review128925-2.scss.html @@ -68,14 +68,14 @@ $name: foo; $attr: border; -p.#{$name} { - #{$attr}-color: blue; +p.#{$name} { + #{$attr}-color: blue; } p { $font-size: 12px; $line-height: 30px; - font: #{$font-size}/#{$line-height}; + font: #{$font-size}/#{$line-height}; } // Special selectors: HTML5 allows user defined tags diff --git a/autotests/input/highlight.scss b/autotests/input/highlight.scss --- a/autotests/input/highlight.scss +++ b/autotests/input/highlight.scss @@ -691,3 +691,19 @@ } #sidebar { width: grid-width(5); } + +@mixin unify-parent($child) { + @at-root #{selector-unify(&, $child)} { + @content; + } +} + +:root { + --font-family-sans-serif: #{inspect($font-family-sans-serif)}; + --font-family-monospace: #{inspect($font-family-monospace)}; +} + +div { + background-image: url("/icons/#{$name}.svg"); + font: #{"string"}; +} diff --git a/autotests/reference/highlight.scss.ref b/autotests/reference/highlight.scss.ref --- a/autotests/reference/highlight.scss.ref +++ b/autotests/reference/highlight.scss.ref @@ -362,7 +362,7 @@ }

@mixin firefox-message($selector) {
- body.firefox #{$selector}:before {
+ body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@@ -384,7 +384,7 @@ p {
$font-size: 12px;
$line-height: 30px;
- font: #{$font-size}/#{$line-height};
+ font: #{$font-size}/#{$line-height};
}

p {
@@ -401,7 +401,7 @@ $translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
- filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}
p {
cursor: e + -resize;
@@ -411,11 +411,11 @@ font-family: sans- + "serif";
}
p:before {
- content: "I ate #{5 + 10} pies!";
+ content: "I ate #{5 + 10} pies!";
}
$value: null;
p:before {
- content: "I ate #{$value} pies!";
+ content: "I ate #{$value} pies!";
}
p {
width: 1em + (2em * 3);
@@ -425,13 +425,13 @@ }
$name: foo;
$attr: border;
-p.#{$name} {
- #{$attr}-color: blue;
+p.#{$name} {
+ #{$attr}-color: blue;
}
p {
$font-size: 12px;
$line-height: 30px;
- font: #{$font-size}/#{$line-height};
+ font: #{$font-size}/#{$line-height};
}

.foo.bar .baz.bang, .bip.qux {
@@ -465,7 +465,7 @@ @import url(foo);

$family: unquote("Droid+Sans");
-@import url("http://fonts.googleapis.com/css?family=#{$family}");
+@import url("http://fonts.googleapis.com/css?family=#{$family}");
#main {
@import "example";
}
@@ -488,7 +488,7 @@ $feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

-@media #{$media} and ($feature: $value) {
+@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
@@ -536,22 +536,22 @@
@mixin adjust-location($x, $y) {
@if unitless($x) {
- @warn "Assuming #{$x} to be in pixels";
+ @warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
- @warn "Assuming #{$y} to be in pixels";
+ @warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}

@mixin adjust-location($x, $y) {
@if unitless($x) {
- @error "$x may not be unitless, was #{$x}.";
+ @error "$x may not be unitless, was #{$x}.";
}
@if unitless($y) {
- @error "$y may not be unitless, was #{$y}.";
+ @error "$y may not be unitless, was #{$y}.";
}
position: relative; left: $x; top: $y;
}
@@ -576,34 +576,34 @@ }

@for $i from 1 through 3 {
- .item-#{$i} { width: 2em * $i; }
+ .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, sea-slug, egret, salamander {
- .#{$animal}-icon {
- background-image: url('/images/#{$animal}.png');
+ .#{$animal}-icon {
+ background-image: url('/images/#{$animal}.png');
}
}

@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
- .#{$animal}-icon {
- background-image: url('/images/#{$animal}.png');
+ .#{$animal}-icon {
+ background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
- #{$header} {
+ #{$header} {
font-size: $size;
}
}

$i: 6;
@while $i > 0 {
- .item-#{$i} { width: 2em * $i; }
+ .item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

@@ -691,3 +691,19 @@ }

#sidebar { width: grid-width(5); }
+
+@mixin unify-parent($child) {
+ @at-root #{selector-unify(&, $child)} {
+ @content;
+ }
+}
+
+:root {
+ --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+ --font-family-monospace: #{inspect($font-family-monospace)};
+}
+
+div {
+ background-image: url("/icons/#{$name}.svg");
+ font: #{"string"};
+}
diff --git a/autotests/reference/review128925-2.scss.ref b/autotests/reference/review128925-2.scss.ref --- a/autotests/reference/review128925-2.scss.ref +++ b/autotests/reference/review128925-2.scss.ref @@ -62,14 +62,14 @@
$name: foo;
$attr: border;
-p.#{$name} {
- #{$attr}-color: blue;
+p.#{$name} {
+ #{$attr}-color: blue;
}

p {
$font-size: 12px;
$line-height: 30px;
- font: #{$font-size}/#{$line-height};
+ font: #{$font-size}/#{$line-height};
}

// Special selectors: HTML5 allows user defined tags
diff --git a/data/syntax/scss.xml b/data/syntax/scss.xml --- a/data/syntax/scss.xml +++ b/data/syntax/scss.xml @@ -34,7 +34,7 @@ --> - + @@ -539,7 +539,7 @@ - + @@ -567,16 +567,21 @@ - + - + - + + + + + + @@ -594,10 +599,10 @@ - + @@ -889,7 +894,7 @@ - + @@ -967,18 +972,9 @@ - + - - - - - - - - - - + @@ -991,6 +987,7 @@ +