 <aside class="example" id="example-12"><div class="marker">
      <a class="self-link" href="#example-12">Example<bdi> 12</bdi></a>
    </div>

  <pre><code class="scss hljs" aria-busy="false">// colors-hex.scss
  $majestic-magenta: #ff00ff;
  $translucent-shadow: #00000080;

  // colors-hsl.scss
  $majestic-magenta: ​hsl(300, 100%, 50%);
  $translucent-shadow: ​hsla(300, 100%, 50%, 0.5);
  </code></pre>
  </aside>

  </section><section id="dimension"><div class="header-wrapper"><h3 id="x8-2-dimension"