Use a more modern mixin example in the tutorial (#550)

Closes #473
sass · May 26, 2021 · d9c3c43 · d9c3c43 · torshin · Jun 12, 2021
1 parent 2fb003b
commit d9c3c43
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/source/guide.html.haml b/source/guide.html.haml
@@ -239,19 +239,36 @@ introduction: >
 
   - example do
     :plain
-      @mixin transform($property) {
-        -webkit-transform: $property;
-        -ms-transform: $property;
-        transform: $property;
+      @mixin theme($theme: DarkGray) {
+        background: $theme;
+        box-shadow: 0 0 1px rgba($theme, .25);
+        color: #fff;
+      }
+
+      .info {
+        @include theme;
+      }
+      .alert {
+        @include theme($theme: DarkRed);
+      }
+      .success {
+        @include theme($theme: DarkGreen);
       }
-      .box { @include transform(rotate(30deg)); }
       ===
-      =transform($property)
-        -webkit-transform: $property
-        -ms-transform: $property
-        transform: $property
-      .box
-        +transform(rotate(30deg))
+      @mixin theme($theme: DarkGray)
+        background: $theme
+        box-shadow: 0 0 1px rgba($theme, .25)
+        color: #fff
+
+
+      .info
+        @include theme
+
+      .alert
+        @include theme($theme: DarkRed)
+
+      .success
+        @include theme($theme: DarkGreen)
 
   :markdown
     To create a mixin you use the `@mixin` directive and give it a name. We've