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

Question

[Елена]

Например есть такой повтор:

&.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"

Comments

[Вадим]

Можно без доп класса, но тогда через переменые в style атрибуте.

А иначе Вы чего-то странного хотите. Хотите сказать браузеру что делать, не говоря что делать.

[Елена]

Вадим, я хотела как наследование, типа как семейство шрифтов, задал родителю и все дочерние его забирают)

[Вадим]

Елена, ну, так можно было бы сделать, через border: inherit. Только судя по тексту вопроса у Вас нет наследования в структуре. Нет родителя, от которого Вы могли бы это забрать.

[Елена]

Вадим, так border: inherit все равно придется писать каждому ребенку

[HardBot]

Елена, ну тогда js в помощь

[Елена]

HardBot, мне в голову пришло только такое)

&.border {
  &1,&2,&3 {}
}

[Вадим]

Елена, нууу в зависимости от структуры и стека проекта можно ещё воспользоваться сложным селектором через родителя.
типа .parent > .child {border: ...}.

[Ankhena]

[class^=border] {}
Тонкости использования селекторов атрибутов в CSS

Также есть селектор *,но лучше не надо для вложенных.

По разуму, класс бы выиграл.

Answer 1

[HardBot]

Ну вот так можно

=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;
    }
  }

Comments

[Елена]

Да, только это тоже повтор, тоже самое что и border: inherit.

[HardBot]

Елена, Это не повтор. Вы не знаете для чего миксины?

[Елена]

HardBot, конечно повтор, только не самих стилей. То-есть надо держать в уме, что нужно добавить эту функцию, чтоб работало как надо. Хотелось бы конечно, один раз указала и забыла)

[Ankhena]

HardBot, ну и во что оно скомпилируется?

[HardBot]

Ankhena, ты наверное не шаришь, что такое препроцессоры :D

[HardBot]

Ankhena, прочти, когда используются миксины, а когда нет и для чего они вообще нужны.

[Ankhena]

HardBot, код скомпилируется ровно в то, что и было и никакого сокращения не будет.
Собственно в этом варианте и миксин ничего особо не сокращает.

[HardBot]

Ankhena, для это существуете минификация кода

[HardBot]

Ankhena, что проще, создать миксин с border со всеми префиксами или дублировать постоянно 6-ти строчный код? Естественно миксин, для этого они и придуманы

[Вадим]

Ankhena, Дело конечно Ваше, но я бы его игнорировал. Полностью. У человека, если это действительно человек, не лады с коммуникацией. Из бана в бан летает. Почему его аккаунт ещё не заблокировали - загадка. Вот, видимо, на днях снова в бан улетит.

[Ankhena]

Вадим, да я уже. Сначала показалось, что небезнадежен. Но когда пошли вендорки в миксинах...

Да и главное, чтобы спрашивающий или другие читатели не приняли за чистую монету.

Answer 2

[Илья Салигжанов]

Теми же кастомными проперти:

.border {
    --border-settings: 1px solid var(--color) ;

    & 1 {
        border: var(--border-settings) ;
        border-radius: 5px;
    } 
}