Create scss-docs shortcode to get some snippets from the Scs… (#30502)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

site/content/docs/4.3/helpers/clearfix.md

@@ -8,21 +8,19 @@ aliases: "/docs/4.3/helpers/"
 
 Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
 
+Use in HTML:
+
 {{< highlight html >}}
 <div class="clearfix">...</div>
 {{< /highlight >}}
 
-{{< highlight scss >}}
-// Mixin itself
-@mixin clearfix() {
-  &::after {
-    display: block;
-    content: "";
-    clear: both;
-  }
-}
+The mixin source code:
 
-// Usage as a mixin
+{{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}}
+
+Use the mixin in SCSS:
+
+{{< highlight scss >}}
 .element {
   @include clearfix;
 }

site/content/docs/4.3/helpers/embed.md

@@ -50,23 +50,4 @@ Aspect ratios can be customized with modifier classes. By default the following
 
 Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` map:
 
-{{< highlight scss >}}
-$embed-responsive-aspect-ratios: (
-  "21by9": (
-    x: 21,
-    y: 9
-  ),
-  "16by9": (
-    x: 16,
-    y: 9
-  ),
-  "4by3": (
-    x: 4,
-    y: 3
-  ),
-  "1by1": (
-    x: 1,
-    y: 1
-  )
-);
-{{< /highlight >}}
+{{< scss-docs name="embed-responsive-aspect-ratios" file="scss/_variables.scss" >}}