Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS inline custom properties

CSS inline custom properties

Markup

<div class="el" 
style="
   --spacetop:40px;
   --spaceleft:20px;
   --spacetopmobile:10px;
   --spaceleftmobile:5px
"></div>

CSS

.el {
  border: 1px #bc9 dashed;
  padding-top: var(--spacetop);
  padding-left: var(--spaceleft);
}

@media screen and (max-width:600px) {
  .el {
    padding-top: var(--spacetopmobile);
    padding-left: var(--spaceleftmobile);
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.