Skip to content

Instantly share code, notes, and snippets.

@stacyk
Last active October 13, 2023 20:23
Show Gist options
  • Save stacyk/c9b690f7b0bba15789ebdeadb0be6b95 to your computer and use it in GitHub Desktop.
Save stacyk/c9b690f7b0bba15789ebdeadb0be6b95 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
body {
--width-large: 100;
--width-small: 25;
--colpx: calc(var(--width-large) / var(--width-small) * 1px);
--colrem: calc(var(--width-large) / var(--width-small) * 1rem);
--colfr: calc(var(--width-large) / var(--width-small) * 1fr);
border: solid olive var(--colpx);
display: grid;
font-size: var(--colrem);
grid-template-columns: 1fr var(--colfr);
}
<div>First Column</div>
<div>Second Column</div>
body {
--width-large: 100;
--width-small: 25;
--colpx: calc(var(--width-large) / var(--width-small) * 1px);
--colrem: calc(var(--width-large) / var(--width-small) * 1rem);
--colfr: calc(var(--width-large) / var(--width-small) * 1fr);
border: solid olive var(--colpx);
display: grid;
font-size: var(--colrem);
grid-template-columns: 1fr var(--colfr);
}
{
"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