Почему большие проекты типа apple.com используют css переменные а не scss/less etc?

Question

[godsplan]

Никогда этого не понимал и хочу понять.Неужели в таких больших компаниях пишут на чистом css? Или там пишут css в js и уже потом он переводится в css с переменными?В чем профит этого и почему не использовать препроцессор?

Comments

[Pavel Shvedov]

Ты видел их исходники?

[Антон Литвиненко]

я в сборках тоже перестал использовать переменные и перешел на css переменные.
почему? потому что в препроцессоре они всего лишь внутри, а css переменными можно пользоваться прям в проекте

[Алексей Уколов]

Использование сss переменных не исключает использование препроцессоров.

[Lynn «Кофеман»]

Обратный вопрос, а в чём профит препроцессоров?

Впрочем, Алексей Уколов, так же прав, одно другому не мешает и у CSS-переменных есть возможности которых нет у препроцессоров.

[godsplan]

Антон Литвиненко, как понять прям в проекте, если вы используете scss , то не означает ли это что вы и так в проекте.

Алексей Уколов, Я это понимаю, но ты же все равно работаешь в проекте с scss и их переменные туппо удобнее писать как минимум
Lynn «Кофеман», Какие например?

[Ankhena]

godsplane,

Какие например?

Например, переопределение по ходу дела, без повторения свойства.
Это не сработает

<p class="p1">Lorem</p>
<p class="p2">Lorem</p>

$bright: red;

p {
  color: $bright;
}

.p2 {
  $bright: yellow;
}

А для кастомных свойств сработает.
https://jsfiddle.net/Ankhena/Lfpw4x3d/

А самое удобное, ими можно манипулировать в JS. И как бонус получить возможность из JS управлять псевдоэлементами.

Почитайте гайд, что ещё они умеют https://css-tricks.com/a-complete-guide-to-custom-...

[Lynn «Кофеман»]

godsplane, например они работают в runtime, а не в compile time

[Антон Литвиненко]

godsplane, на прод код идет скомпиленый с чистым css, в котором переменные scss превратились в обычные свойства. А вот переменные cssими и остались и ими можно манипулировать из админки, например сменить акцентный цвет сайта.

[godsplan]

Антон Литвиненко, я не понимаю почему если у тебя есть возможность редачить css код, то почему бы сразу не редачить и компилить scss код

[Ankhena]

godsplane, и как вы будете творить, например, светлую и темную темы?
Грузить пользователю разные файлы стилей?
А с кастомными достаточно при наличии класса в body переопределить несколько переменных. Т.е. общий CSS вырастет совсем незначительно.

[godsplan]

Ankhena, а как работать с scss и css переменными?задавать в scss файлах css переменные?

[Ankhena]

godsplane, вы в scss файлах можете писать чистый css, так что нет никаких проблем.

Причем, можно писать даже так:
--color: #{$color};
т.е. кастомному свойству в качестве значения задать scss-переменную. Или результат манипуляций с scss-переменными.
Сейчас что-то забыла ради какого фокуса мне это было нужно, вспомню расскажу.

Но только не нужно специально мудрить в коде только ради того, чтобы использовать вообще ВСЁ, что знаете. Пишите как можно проще, поменьше дублируйте свой же код и т.д.

[Антон Литвиненко]

godsplane, я не понимаю почему если у тебя есть возможность редачить css код, то почему бы сразу не редачить и компилить scss код
Давай представим ситуацию когда сайт уже на проде. Посажен себе на вордпресс, подключены стили и скрипты. Допустим я как разработчик еще и создал папку scss а ассетах и кинул туда исходники. Забрал деньги и умер.
Приходит таска тебе, как фрилансеру: надо акцентный цвет на сайте с зеленого сменить на голубой. и доступ есть только в админку. А лучше не тебе, а Елене, которая стоит дешевле но галпом пользоваться не умеет и даже коалой не умеет. Если у Елены есть редактор под рукой, то она может множественной заменой поменять акцентный цвет и потом вкинуть обратно файлы стилей. Если Елена увидит css переменную, то она в одном месте поменяет цвет.
А если я как приличный разработчик подумал о настройках, то Елена в админке в настройках сайта колорпикером выберет нужный цвет и он автоматически применится на всем сайте. както так...

Answer 1

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

1. Неизвестно, что там apple.com использует
2. CSS переменные не исключают использование переменных препроцессора
3. CSS переменные можно менять в рантайме, в отличие от переменных препроцессора.

Comments

[FrelFrloich]

2. Дополню, не исключено что css переменные задаются в scss.

Answer 2

[teleskop150750]

ВК вроде бы стал писать на чистом CSS.