Библиотека базовых sass-стилей
npm install @ws-serenity/sass-stylingscss
@import '@ws-serenity/sass-styling/lib/sass';
`
$3
- adaptive - миксины для адаптива
- alignment - размещение элементов (flex, margin-center,...)
- functions - полезные sass-функции
- keyframes - анимации
- styling - внешний вид (максимальное скругление, background-alpha)
- svgUtils - цвет и размер svg
- textUtils - оверфлоу текста
Side-effect
Импортировать эти файлы необходимо единожды! Иначе возникнет дублирование стилей
Generator
$3
`scss
@import '@ws-serenity/sass-styling/lib/generator/colors';
// for $themes and $themes-config declaration check storybook
@mixin create-css-themes-root() {
@each $theme-name, $theme in $themes {
$theme-colors: generate-theme-colors($theme, $theme-config);
&.#{$theme-name}-theme {
@each $color-name, $color-value in $theme-colors {
--#{$color-name}: #{$color-value}
}
}
}
}
`
$3
`scss
@import '@ws-serenity/sass-styling/lib/generator/fonts';
// for full example check storybook
:root {
// 1. declare css-vars
@include set-fonts-css-vars-by-map((
// @formatter:off
heading-1 50 bold 140% -0.03em,
body-1 18 regular 140% -0.03em,
// @formatter:on
));
// 2. declare font and use in as placeholder, combined with mixin
%font-family-roboto {
font-family: 'Roboto', sans-serif;
}
@mixin use-font($name) {
@extend %font-family-roboto;
// 2.5 call special mixin from library, to set css-vars
@include use-css-vars-based-font($name);
}
// 3. declare placeholders and just use mixin above
%heading-1 {
@include use-font(heading-1);
}
%body-1 {
@include use-font(body-1);
}
// 4. declare the styles
.body-1 {
@extend %body-1;
}
.heading-1 {
@extend %heading-1;
}
}
``