Нужны ли препроцессоры CSS в 2022/2023?

Question

[Rubical]

Насущный вопрос. А нужны ли вообще препроцессоры в 2к22, уже почти 2к23 году? Переменные давно реализованы в нативном CSS, вложенность также. Какие преимущества остались у препроцессоров?

Comments

[alexalexes]

CSS, вложенность также

Когда успели?

[Ankhena]

Нужны ли препроцессоры CSS в 2022/2023?

Кому? Мне нужны.

Вам, не знаю. Видимо, раз спрашиваете, вероятно, нет.

[Сергей delphinpro]

Переменные давно реализованы в нативном CSS

Не нужно сравнивать переменные в препроцессорах и кастомные css свойства.
Это совершенно разные вещи. Они не исключают друг друга, а взаимодополняют.

Какие преимущества остались у препроцессоров?

Все остались которые и были.

Судя по всему, вы о препроцессорах слышали краем уха. Рекомендую более детально погрузиться в эту тему.

[Froggyweb]

а для js нужны препроцессоры?
это не вопрос....
Вопрос напоминает предновогодние тренеды. Нужен ли ... в ... году. Актуальна ли технология ... в ... году

Answer 1

[Василий Банников]

Переменные давно реализованы в нативном CSS

В препроцессорах другие переменные.

вложенность также.

Разве?

Вообще препроцессоры много удобного сахара добавляют. (https://sass-scss.ru/guide/)

Если вы не видите нужных фич, значит вам не нужны.

Answer 2

[Михаил Р.]

А нужны ли вообще препроцессоры в 2к22, уже почти 2к23 году

Да.

Переменные давно реализованы в нативном CSS

Рили? Ниже переменная (она же map), можно пример в "нативном CSS"?

$palette: (

  light: (
    1: "0deg 100% 99%",
    2: "0deg 100% 98%",
    3: "0deg 100% 96%",
  ),
  
  dark: (
    1: "0deg 0% 0%",
    2: "0deg 0% 0%",
    3: "0deg 0% 0%",
  ),

);

вложенность также

Можно пример вложенности ниже в "нативном CSS" (не строкой `.car .car--model`, а именно, как "Nesting" в Sass)?

.car {
  color: red;
  
  &--model {
    background: black;
    
    &-tesla {
      color: blue;
    }
  }
}

Какие преимущества остались у препроцессоров?

Преодполжим, в переменную выше (она же map) залетает 99 палитр, разных оттенков, реализуйте в "нативном CSS" автоматическую генерацию css классов на основе этой переменной, чтобы получать на выходе примерно такое (по дороге, желательно вешать брекпоинты для дисплеев разных размеров и наследоваться от пользовательских цветовых тем, чтобы например, темное было на темном):

.palette--light-1 { color: hsl(0deg 100% 99%) }
.palette--light-2 { color: hsl(0deg 100% 98%) }
// ...
.palette--dark-3 { color: hsl(0deg 0% 0%) }

Answer 3

[Сергей delphinpro]

Смотри пример https://codepen.io/delphinpro/pen/QvLZxg
Сможешь это кратко написать на css?

@for $i from 0 through 60 {
    $angle: 180 / 60 * $i * 1deg;
    .radial-progress[data-progress="#{$i}"] .circle-block .fill,
    .radial-progress[data-progress="#{$i}"] .circle-block .mask.full {
        transform: rotate($angle);
    }
    .radial-progress[data-progress="#{$i}"] .circle-block .fill.fix {
        transform: rotate($angle * 2);
    }
    .radial-progress[data-progress="#{$i}"] .inset .percentage .numbers {
        width: 100%;
    }
}