Задать вопрос
Elena0394
@Elena0394

Можно ли сократить повторяющийся css без доп класса?

Например есть такой повтор:
&.border {
    &1 {
      border: 1px solid var(--color1);
      border-radius: 5px;
    }
    &2 {
      border: 1px solid var(--color1);
      border-radius: 10px;
    }
    &3 {
      border: 1px solid var(--color1);
      border-radius: 15px;
    }
    &4 {
      border: 1px solid var(--color1);
      border-radius: 20px;
    }
  }

мне хочется избавится от повтора
border: 1px solid var(--color1);
но и чтоб не пришлось добавлять еще один класс в html. Потому-что если сделаю так:
&.border {
    border: 1px solid var(--color1);
    &1 {
      border-radius: 5px;
    }
    &2 {
      border-radius: 10px;
    }
    &3 {
      border-radius: 15px;
    }
    &4 {
      border-radius: 20px;
    }
  }

то в html придется указывать так:
class="border border1"
  • Вопрос задан
  • 207 просмотров
Подписаться 1 Простой 8 комментариев
Пригласить эксперта
Ответы на вопрос 2
HardBot
@HardBot
back-end, front-end developer
Ну вот так можно
=border ($color) {
   border: 1px solid #{$color};
}

&.border {
    &1 {
      +border(#000);
      border-radius: 5px;
    }
    &2 {
      +border(#000)
      border-radius: 10px;
    }
    &3 {
      +border(#000);
      border-radius: 15px;
    }
    &4 {
      +border(#000);
      border-radius: 20px;
    }
  }
Ответ написан
Le_Traceur_Snork
@Le_Traceur_Snork
PHP-программист | Wordpress
Теми же кастомными проперти:
.border {
    --border-settings: 1px solid var(--color) ;

    & 1 {
        border: var(--border-settings) ;
        border-radius: 5px;
    } 
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы