export const variables = `<h1>SCOPING</h1>
<p style="width:70%;">
    Variable scoping in Sass has changed over the years. Until fairly recently, variable declarations
    within rulesets and other scopes were local by default. However when there was already a global variable with the
    same name, the local assignment would change the global variable. Since version 3.4, Sass now properly tackles the
    concept of scopes and create a new local variable instead.
</p>
<p style="width:70%;">
    The docs talk about global variable shadowing. When declaring a variable that already exists on
    the global scope in an inner scope (selector, function, mixin…), the local variable is said to be shadowing the
    global one. Basically, it overrides it just for the local scope.
</p>
<p style="width:70%;">
    The following code snippet explains the variable shadowing concept.
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Initialize a global variable at root level.
$variable: 'initial value';

// Create a mixin that overrides that global variable.
@mixin global-variable-overriding {{'{'}}
  $variable: 'mixin value' !global;
{{'}'}}

.local-scope::before {{'{'}}
  // Create a local variable that shadows the global one.
  $variable: 'local value';

  // Include the mixin: it overrides the global variable.
  @include global-variable-overriding;

  // Print the variable’s value.
  // It is the **local** one, since it shadows the global one.
  content: $variable;
{{'}'}}

// Print the variable in another selector that does no shadowing.
// It is the **global** one, as expected.
.other-local-scope::before {{'{'}}
  content: $variable;
{{'}'}}
    </pre>
</div>`;
