Установите маржу, эквивалентную шкале преобразования - PullRequest
0 голосов
/ 04 февраля 2020

Я пытаюсь масштабировать активное li с ul до 1,5 transform: scale(1.5);. Как я могу установить поле динамически, учитывая значение scale()?

У меня есть компилятор sass, и значение scale() устанавливается с переменной. Как я могу добавить поле, эквивалентное значению scale()?

(Например, если 1,5 масштабирует 2 пикселя, я бы хотел добиться margin: 0 2px;)

РЕДАКТИРОВАТЬ

Вот мой код:

/* 
    $paginator value is 1.25
    margin: 0 ?px; is what I am asking for
*/
&.active {
    margin: 0 ?px;
    transform: scale($paginator);
}

1 Ответ

2 голосов
/ 04 февраля 2020
<ul>
  <li>list 1</li>  
  <li class='active'>list 1</li>
  <li>list 1</li>
</ul>

SASS:

@mixin scale( $scale: 1.5, $margin: 2) {
   margin: 0 $scale * $margin * 1px;
   transform: scale($scale);
}

li {
  color: red;
    padding: 5px;
  background-color: green;
  font-size: 16px;
  display: inline-block;

}

li.active {
  @include scale(1.5, 20); //arguments are optional

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...