Как сделать adapteveValue миксин?

Question

[LastT]

как сделать миксин который будет адаптировать свойства к примеру падинг или марджин

Comments

[Ankhena]

Что именно вы делали и что не получилось.?

А так что именно нужно сделать? Как они должны адаптироваться.

Например, clamp работает без всяких миксинов.

[LastT]

Ankhena, что бы при уменьшении екрана падинг уменьшался до определенного значения
пробовал етот миксин в scss:
src="https://habrastorage.org/webt/62/f2/95/62f295b8bdc..." alt="image"/>

но когда его вызывал через @include adaptiveValue("padding", 60, 40) ничего не менялось

[Ankhena]

LastT, так clamp и единицы vw вам помогут без миксина.

Answer 1

[Ivan Gavrilich]

Вызываете с помощью @include, первым аргументом указываете свойство в кавычках, вторым аргументом оригинальный размер, третьим аргументом размер на 320px.

@mixin retina-property($property, $startSize, $minSize) {
  $additionalSize: $startSize - $minSize;

  #{$property}: calc(
    #{$minSize + px} + #{$additionalSize} * ((100vw - 320px) / #{$maxWidth - 320})
  );
}