Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<button>Button</button>
// ----
// 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! */
}
}
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! */
}
}
<button>Button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment