Login
PostCSS

PostCSS міксини і функції

18 Oct 2022

Функції

ac (adaptive calc)

Функція для калькулювання значень в залежності від ширини екрану. В функцію передаються такі аргументи:

  • startSize - початкове значення
  • endSize - кінцеве значення
  • minBreakpoint - мінімальний розмір екрану до якого буде калькулюватись значення (за замовчуванням 768)
  • maxBreakpoint - максимальний розмір екрану від якого буде починати калькулюватись значення (за замовчуванням 1440)

rc (responsive calc)

Схожа функція на ac, але працює краще. Детальніше тут.

perc (percentage)

Функція яка вираховує відсоток від числа. Аргументи:

  • number1 - значення яке треба перевести у відсотки
  • number2 - значення від якого потрібно взяти відсоток (за замовчуванням 1440)

vw (view width)

Аналог попередньої функції але повертає значення у vw. Аргументи:

  • number1 - значення яке треба перевести у vw
  • number2 - значення від якого потрібно взяти vw (за замовчуванням 1440)

setTransition

Функція зроблена для зручності, повертає рядок зі списком властивостей які треба анімувати.

Аргументи:

  • Першим аргументом можна передати час переходу або зразу передати властивість яку потрібно анімувати (якщо час не передається за замовчуванням він буде 250ms)
  • Далі в необмеженій кількість можна передати властивості які треба анімувати.

Приклад:

transition: setTransition(500ms, color, background-color, margin);

transition: setTransition(color, background-color, margin, padding, width);

/* Resolves to: */
transition: color 500ms, background-color 500ms, margin 500ms;

transition: color 250ms, background-color 250ms, margin 250ms, padding 250ms, width 250ms;

Міксини

media

Повертає медіавираз для ширини вікна з максимальною шириною яку ви передаєте як аргумент.

Приклад: 

@mixin media 769{
  color: red;
  width: 50%;
}

/* Resolves to: */
@media only screen and (max-width: 769px) {
  color: red;
  width: 50%;
}

min-media

Має схожий функціонал до попереднього міксину, але в аргументи передається не максимальна ширина екрану а мінімальна.

Приклад:

@mixin min-media 769{
  color: red;
  width: 50%;
}

/* Resolves to: */
@media only screen and (min-width: 769px) {
  color: red;
  width: 50%;
}

transition-all

Використовується для встановлення переходу для всіх властивостей елементу.

aspect-ratio

Використовується для того щоб задати співвідношення сторін зображенню. Визивається в обгортці зображення. Також можна передати максимальну і мінімальну висоту третім і четвертим аргументом.

Приклад:

html:
<div class="img-wrapper">
  <img src="./test.png" class="image" alt="test">
</div>

pcss:
.img-wrapper{
  @mixin aspect-ratio 1 1;
}

max-line-length-one

Використовується для обрізання тексту і додавання трьох крапок якщо текст не поміщається в один рядок.

max-line-length

Використовується для обрізання тексту і додавання трьох крапок якщо текст не поміщається в задану кількість рядків.

transparent-bg-input

Використовується для перебивання стилів автозаповнення інпутів. Можна передати колір тексту (за замовчуванням #ffffff).

4