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,15 +368,15 @@
}
@mixin firefox-message($selector) {
- body.firefox #{$selector}:before {
+ body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
$map: (key1: value1, key2: value2, key3: value3);
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
@@ -390,24 +390,24 @@
p {
$font-size: 12px;
$line-height: 30px;
- font: #{$font-size}/#{$line-height};
+ font: #{$font-size}/#{$line-height};
}
p {
color: #010203 + #040506;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
$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,19 +431,19 @@
}
$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 {
$selector: &;
}
@mixin does-parent-exist {
@if & {
&:hover {
@@ -471,11 +471,11 @@
@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";
}
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
@@ -494,80 +494,80 @@
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
-@media #{$media} and ($feature: $value) {
+@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
#context a%extreme a %extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
a.important {
@extend .notice !optional;
}
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}
@debug 10em + 12em;
@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;
}
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
$type: monster;
p {
@if $type == ocean {
@@ -582,46 +582,46 @@
}
@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;
}
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
@mixin clearfix {
display: inline-block;
&:after {
@@ -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"};
+}