Global CSS options with custom properties
With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward:
$option: false;
@mixin doThing {
@if $option {
do-thing: yep;
}
}
.el {
@include doThing;
}Can we do that in native CSS with custom properties? Mark Otto shows that we can. It’s just a smidge different.
html {
--component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}
.component {
box-shadow: var(--component-shadow);
}
<!-- override the global anywhere more specific! like
<div class="component remove-shadow">
or
<body class="remove-shadow"> -->
.remove-shadow {
--component-shadow: none;
}Direct Link to Article — Permalink
The post Global CSS options with custom properties appeared first on CSS-Tricks.
