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;
}
Is there a way to change the values of the properties of the css by the browser so that the changes are updated and saved ?
You can use javascript to change these css variables and save the results to localstorage (or a database somewhere). This way everytime you refresh the page, the updated values are shown. Something like this maybe (untested).
Not sure if this formatted markdown properly (if a moderator could check).