CSS-переменные / SCSS

CSS-переменные

/* Объявление переменных */
:root {
  --my-custom-color: tomato;
  --my-custom-size: 16px;
}

/* Применение */
.some-class {
  color: var(--my-custom-color);
  font-size: var(--my-custom-size);
}

/* Объявление внутри с переопределение */
.some-class {
  color: var(--my-custom-color, red);
  font-size: var(--my-custom-size, 14px);
}

/* Можно использовать математические операции с цифровыми значениями 
с помощью функции calc() */
.some-class {
  font-size: calc(var(--my-custom-size) * 0.5);
}

---

SCSS

• Official Docs

Импорт и расширение (новый способ)

@use 'styles/vars' as *; // файл с переменными
@use 'styles/mixins' as *; // файл с примесями

.AuthData {
  @include make-white-block();

  code {
    color: $warning;
  }
}

@use 'styles/vars';
@use 'styles/mixins';

.AuthData {
  @include mixins.make-white-block();

  code {
    color: vars.$warning;
  }
}

---

Импорт и расширение (старый способ)

@import "scss/vars";   // файл с переменными
@import "scss/mixins"; // файл с примесями

.some-class {
  clear: left
  float: left;
}

.content-box {
  @extend .some-class; // расширить класс
  color: $base-color;
  border: 1px solid red;
}

Переменные

$navy: #1d365d;

.class {
  color: $navy;
}

Вложенность

.super-class-name {
  color: #fff;

  a {
    text-decoration: none;

    span {
      font-size: 1em;
    }
  }
}

Шорткат селектора (&)

// & - текущий селектор
.super-button {
  &__text { font-size: $font-size; } // .super-button__text
  &--red  { color: red; } // .super-button--red
  &--blue { color: blue; } // .super-button--blue
  &:hover { ... }
  &:active { ... }
  & span { ... }
  &[disabled] { ... }
  &.some-class { ... }
}

Мат. операции

div {
  padding-top: 10px + 20;     // = 30px
  padding-bottom: 100px - 50; // = 50px
  font-size: 2em * 2;         // = 4em
  left: 50% / 2;              // = 25%
  rgb(10, 10, 10) + 10;       // rgb(20, 20, 20)

  // встроенные функции
  ceil((16px + 2cm) / 2)      // округ. в большую ст.
  floor((16px + 2cm) / 2)     // округ. в меньшую ст.
  round((16px + 2cm) / 2)     // округ. в ближ. ст.
}

Цветовые функции

div {
  // цвет поверн. от красного на 90° по чаc.
  color: spin(red, 90);

  // цвет на 45° от #f0f против чаc.
  border-color: spin(#f0f, -45);

  // светлее red на 50%
  color: lighten(red, 50%);

  // темнее blue на 25%
  color: darken(blue, 25%);

  // green насыщеннее на 20%
  color: saturate(green, 20%);

  // blue бледнее на 50%
  color: desaturate(blue, 50%);

  // @color прозрачнее на 50%
  color: fade(@color, 50%);

  // SASS: $color прозрачнее на 50%
  color: rgba($color, 0.5);
}

Миксины

/* объявление примеси */
@mixin white {
  color: white;
}

/* применение примеси */
.text {
  @include white;
}

// Примесь с параметром
@mixin margin(@value) {
  margin-top: @value;
  margin-bottom: @value;
}

// Примесь с несколькими параметрами
@mixin offset(@padding; @margin) {
  padding: @padding;
  margin: @margin;
}

.block1 {
  @include margin(10px);
}

.block2 {
  @include offset(5px; 10px);
}

Пример миксинов для адаптивности

// BREAKPOINTS (useWindowSize - используются тоже эти)
//                  DESKTOP [1201 - 1920] --> 1920 макет
$laptop: 1200px; // LAPTOP  [1024 - 1200] --> 1024 макет
$tablet: 1023px; // TABLET  [768 - 1023]  --> 768 макет
$mobile: 767px; // MOBILE  [0 - 767]     --> 414 макет

@mixin laptop {
  @media screen and (max-width: $laptop) {
    @content;
  }
}

@mixin tablet {
  @media screen and (max-width: $tablet) {
    @content;
  }
}

@mixin mobile {
  @media screen and (max-width: $mobile) {
    @content;
  }
}

---

customScrollBar

@mixin customScrollBar($color) {
  // scrollbar track width
  &::-webkit-scrollbar {
    width: 4px;
  }

  // scrollbar track background (полоска)
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  // scrollbar thumb (бегунок)
  &::-webkit-scrollbar-thumb {
    background-color: $color;
    border-radius: 8px;
  }
}

---

math

@use 'sass:math';
@use 'styles/vars' as *;

.tableRow {
  cursor: pointer;
  transition: all math.div($duration, 2);
}

---

CSS \ SCSS modules

• Любой файл с суффиксом .module.scss или .module.css становится модулем.
• Изоляция классов
• Нет глобальных классов
• Применяется только там, где импортируется
• В разных модулях модут быть одинаковые названия классов, которые друг на друга не влияют, так как будут хэшироваться

:global

:global(.MuiTableCell-head) говорит CSS Modules: этот класс не хешировать, оставить его как есть.

.head {
  :global(.MuiTableCell-head) {
    background-color: #fff;
    padding: 8px;
    font-weight: 600;
  }
}

Файл Name.module.scss — это CSS Modules. Локальные классы вроде .head при сборке получают уникальный суффикс, например Pharmacies_head_a1b2c3. Класс Material UI MuiTableCell-head в разметке такой же, как в исходнике, без вашего хеша. Если написать его обычным селектором, сборщик тоже его переименует, и правило перестанет попадать в ячейки таблицы.

С :global получается примерно такой CSS:

.Pharmacies_head_a1b2c3 .MuiTableCell-head {
  background-color: #fff;
  padding: 8px;
  font-weight: 600;
}

.head остаётся локальным (хешируется), .MuiTableCell-head — глобальным