Generated by SassMeister.com.

SassMeister-input-HTML.html

<button>Button</button>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$primary-text-color: #333;
$a: 1;

button {
    color: $primary-text-color;
    width: $a; /* 1 */
}

@media screen {
  $primary-text-color: blue;
  $a: $a + 1;
  
  button {
    color: $primary-text-color;
    width: $a; /* now 2 */
  }
}

@media print {
  $primary-text-color: blue;
  $a: $a + 1;
  
  button {
    color: $primary-text-color;
    width: $a; /* still 2, not 3 as above didnt harm out of scope value */
  }
}

@media (max-width: 1000px) {
  $primary-text-color: orange;
  $a: $a + 1;
  
  button {
    color: $primary-text-color;
    width: $a; /* 2! */
  }
}

button {
    color: $primary-text-color;
    width: $a; /* still 1, not 2 */
}

@media (max-width: 1000px) {
  //$primary-text-color: orange;
  // Override in a similar @media but here lets just use outer var
  
  button {
    color: $primary-text-color;
    width: $a; /* still inherits 1! */
  }
}

SassMeister-output.css

button {
  color: #333;
  width: 1;
  /* 1 */
}

@media screen {
  button {
    color: blue;
    width: 2;
    /* now 2 */
  }
}

@media print {
  button {
    color: blue;
    width: 2;
    /* still 2, not 3 as above didnt harm out of scope value */
  }
}

@media (max-width: 1000px) {
  button {
    color: orange;
    width: 2;
    /* 2! */
  }
}

button {
  color: #333;
  width: 1;
  /* still 1, not 2 */
}

@media (max-width: 1000px) {
  button {
    color: #333;
    width: 1;
    /* still inherits 1! */
  }
}

SassMeister-rendered.html

<button>Button</button>