@ws-serenity/sass-styling

About

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

Sass

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

Общий импорт:

@import '@ws-serenity/sass-styling/lib/sass';

Содержимое

• adaptive - миксины для адаптива
• alignment - размещение элементов (flex, margin-center,...)
• functions - полезные sass-функции
• keyframes - анимации
• styling - внешний вид (максимальное скругление, background-alpha)
• svgUtils - цвет и размер svg
• textUtils - оверфлоу текста

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;
  }
}