Open
Description
Voordelen om CSS als bron te hebben:
- geen
sass
ensass-loader
meer nodig voor:component-library-angular
component-library-react
component-library-vue
web-component-library-stencil
storybook
- live reload zonder watcher
<link rel="stylesheet" href="components/button-css/src/index.css" />
Voordelen van SCSS mixins hebben:
- mogelijk om CSS toe te passen op nieuwe selectors
- selectors voor vanilla HTML
button { @include utrecht-button; }
- selectors voor legacy codebases, zoals Bootstrap:
.btn { @include utrecht-button; }
- selectors voor vanilla HTML
Alle class name selectors CSS zou makkelijk omgezet kunnen worden:
.utrecht-component {
color: red;
}
Wordt:
@mixin utrecht-component {
color: red;
}
Alle pseudo-classes zouden ook niet moeilijk zijn:
.utrecht-component:hover {
color: red;
}
Wordt:
@mixin utrecht-component--hover {
color: red;
}
Alle pseudo-selectors zouden ook niet moeilijk zijn:
.utrecht-component::placeholder {
color: red;
}
Wordt:
@mixin utrecht-component__placeholder {
color: red;
}
Mixins om code te genereren hebben niet een voor de hand liggend equivalent in CSS:
@mixin utrecht-button-appearance($block, $modifier) {
.#{$block}--#{$modifier} {
@include utrecht-button-appearance-properties($block, $modifier);
}
Mixins die voor zowel een class name als een media query worden gebruik hebben niet een voor de hand liggend equivalent in CSS:
@mixin utrecht-component--forced-colors {
color: CanvasText;
}
.utrecht-component--forced-colors {
@include utrecht-component--forced-colors;
}
@media screen screen and (forced-colors: active) {
.utrecht-component {
@include utrecht-component--forced-colors;
}
}
Metadata
Metadata
Assignees
Labels
No labels