Use separate scope for variables within a mixin (#10453)

Also contains another fix related to how variable values are replaced in
mixins.

Change-Id: I7a53e0a62041da6557eea10e124e64a55c7823f4

2 files changed, 25 insertions, 0 deletions

diff --git a/theme-compiler/tests/resources/automatic/scss/chained_mixins.scss b/theme-compiler/tests/resources/automatic/scss/chained_mixins.scss
new file mode 100644
index 0000000000..007d611149
--- /dev/null
+++ b/theme-compiler/tests/resources/automatic/scss/chained_mixins.scss
@@ -0,0 +1,15 @@
+/* based on reindeer nativebutton */
+
+@mixin foo-link($styleName : bar) {
+
+.#{$styleName}-link {
+	a: b;
+	}
+	
+}
+
+@mixin foo($styleName : bar) {
+	@include foo-link($styleName);
+}
+
+@include foo;
diff --git a/theme-compiler/tests/resources/automatic/scss/mixin_variables.scss b/theme-compiler/tests/resources/automatic/scss/mixin_variables.scss
new file mode 100644
index 0000000000..28cde661dd
--- /dev/null
+++ b/theme-compiler/tests/resources/automatic/scss/mixin_variables.scss
@@ -0,0 +1,10 @@
+@mixin color($color : red, $tag : bar) {
+	.#{$tag} {
+		color: $color;
+	}
+}
+$color : green;
+@include color($color: purple, $tag : foo);
+@include color($tag : baz);
+@include color($color: $color, $tag : foobar);
+@include color($tag : foobaz);