@ws-serenity/sass-styling
v1.1.3
Published
Библиотека базовых sass-стилей
Downloads
125
Keywords
Readme
About
Библиотека базовых sass-стилей
Sass
Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно.
Общий импорт:
@import '@ws-serenity/sass-styling/lib/sass';
Содержимое
adaptive
- миксины для адаптиваalignment
- размещение элементов (flex, margin-center,...)functions
- полезные sass-функцииkeyframes
- анимацииstyling
- внешний вид (максимальное скругление, background-alpha)svgUtils
- цвет и размер svgtextUtils
- оверфлоу текста
Side-effect
Импортировать эти файлы необходимо единожды! Иначе возникнет дублирование стилей
Generator
Палитры
@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}
}
}
}
}
Шрифтов
@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;
}
}