Как внутри функции определить ширину экрана?

Question

[lebedev121]

Хочу сделать что-то по типу:

@function calc-size($size) {
        @if(ширина экрана < 768) {
                @return $size*1;
        } @else {
                @return $size*1.5;
        }
    
}

Как можно добиться желаемого в sass?

Comments

[sim3x]

Вы видимо не понимаете как цсс работает

Вам требуется указать все варианты ширин екрана и для каждого прописать все ширины елементов, которым требуется сменить ширину и/или положение

[RAX7]

На этапе компиляции sass нет никакой ширины экрана, как и нет самого экрана. Вам нужен миксин который сгенерирует медиа-выражения. Например типа такого:

@mixin calc-font-size($size, $breakpoint) {
  @media (max-width: $breakpoint) {
    font-size: $size*1px;
  }

  font-size: $size*1.5px;
}

[lebedev121]

RAX7, Спасибо большое, это почти подходит. А как бы сделать миксин, чтобы он только возвращал только $size*1.5px без font-size? Потому что я хочу использовать его не только для font-size, но и для других свойств. То есть в конечном итоге чтобы работало вот так:

p {
    font-size: @include calc-size(2, 768px);
}
div {
    width: @include calc-size(10, 768px);
}

[RAX7]

lebedev121, что бы возвращал только $size*1.5px, через миксин не получится. Можно сделать типа такого:

@mixin calc-size($prop, $size, $breakpoint) {
  @media (max-width: $breakpoint) {
    #{$prop}: $size*1px;
  }

  #{$prop}: $size*1.5px;
}

и использовать так:

div {
    @include calc-size('width', 10, 768px);
}

Answer 1

[Юрий]

@media (max-width: 768) {
   @function calc-size($size) {
  }
}