Skip to content

Instantly share code, notes, and snippets.

@sgregson
Last active March 1, 2023 16:31
Show Gist options
  • Save sgregson/3efbe08ae1644be7016e6d46dc61b1f0 to your computer and use it in GitHub Desktop.
Save sgregson/3efbe08ae1644be7016e6d46dc61b1f0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// vars are implied/provided globally
$font-size-1000: 10px;
/** before*/
.node {
someProp: $font-size-1000
}
/**
* after codemod
* 1. inject media query
* 2. assign responsive values
* 3. reassign variable
*/
@media (max-width: 480px) { // (1)
:root {
--font-size-1000: 50px; // (2)
}
}
$font-size-1000: var(--font-size-1000, $font-size-1000); // (3)
.node {
someProp: $font-size-1000
}
/** before*/
.node {
someProp: 10px;
}
/**
* after codemod
* 1. inject media query
* 2. assign responsive values
* 3. reassign variable
*/
@media (max-width: 480px) {
:root {
--font-size-1000: 50px;
}
}
.node {
someProp: var(--font-size-1000, 10px);
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment