DEV Community

Discussion on: What no one told you about CSS Variables

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Love the invisible characters thing.
Just worked out using vars for prefixed properties can save a lot of data, e.g.:

.pattern {
    --stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpattern id='s' width='4' height='4' viewBox='0 0 4 4' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath d='M -1 2 h6 v2 h-6z'/%3E%3C/pattern%3E%3Crect fill='url(%23s)' height='100%25' width='100%25'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--stripes);
    mask-image: var(--stripes);
}
Enter fullscreen mode Exit fullscreen mode

Some comments have been hidden by the post's author - find out more