@ws-serenity/sass-styling

About

Библиотека базовых sass-стилей

Sass

Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно.

Общий импорт:
``scss
@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;
}
}
``