Flying, я прошу прощения, но у меня есть просьба: не могли бы вы показать код, о котором вы говорили? Просто я видел много примеров серьёзного использования, но они зачастую выглядели больше заумью, чем необходимость.
По описанию, ваш случай выглядит наиболее, что ли, приближенным к реальному упрощению задачи, поэтому хотелось бы посмотреть на него в качестве практики.
Bongie, да, ещё момент, учитывайте возможный большой контент табов и большой контент в правой колонке (где цвета и кнопка покупки).
Так же, учтите вопрос адаптивности. Если адаптировать, просто переделав горизонтальное направление в вертикальное, то до кнопки покупки и выбора цвета пользователь будет добираться через все табы.
lukoie, а что насчёт компиляции LESS на стороне клиента — лично я против этого занятия: оно увеличивает время начала отображения страницы. И чем слабее машина, тем больше мы получаем задержку перед непосредственным началом её рендеринга. Такого быть не должно, на мой взгляд.
lukoie, бывает потребность в циклах, условиях и тому подобном. В SASS это удобнее и проще, на мой взгляд, чем в LESS. Ещё очень не нравится, что в LESS переменные начинаются с @.
SCSS — потому что используются скобки. Скобки для меня сильный графический якорь для глаз. Мне с ними гораздо удобнее. В другие различия синтаксиса, если они есть, я не вникал, если честно, мне скобок вполне достаточно :))
lukoie, я когда смотрел все эти расширения, то прифигел в своё время. Ряд совсем непонятных, ряд забавных, несколько полезных, но большинство — очень специфические и для специфических задач.
lukoie, да-да, по этой ссылке. Там хорошие примеры. В любом случае, сами понимаете, хороший код можно писать на любом препроцессоре, любовь к чему-то корректному, наверное, зачастую больше дело привычки, чем фактического удобства.
Да, насчёт сложения цветов я высказался неверно: я более использую осветление и затемнение цветов или же функции работы с насыщенностью. Как и многие, я использую это для кнопок, теней, цвета текста, градиентов и прочего подобного. А именно сложение цветов зачастую использую для всякого рода градиентов.
Продолжая тему целом сообразности препроцессоров: всё же в переменных хранить цвета слишком удобно, но если бы CSS-переменные не имели проблем с поддержкой относительно архаичных браузеров, которые ещё в строю (к сожалению), я вполне мог бы и отказаться от препроцессоров на ряде проектов.
Касательно вообще препроцессоров, то в относительно мелких проектах я понял, что мне обычно нужен функционал только переменных и сложений цветов. Даже вложенностью порой не пользуюсь вовсе, чтобы не плодить сложные связки селекторов. Примеси могут быть даже вредными, как ни странно, т. к. могут плодить кучу кода на выходе и излишне усложнять логику стилей.
Т. е. «Vanilla CSS» может быть даже более логичным выбором, чем любой препроцессор — всё зависит от задачи и рациональности того или иного инструмента для её выполнения, конечно.
Если говорить в частности, то сам до недавнего времени пользовался LESS, но перешёл на SCSS по ряду причин, которые указаны в ссылке, что прислал lukoie.
Лучше препроцессоров, кроме указанных вами, я не знаю. PostCSS, безусловно, не замена препроцессорам — у них разные задачи.
Максим Ленский, смотри, посмотрел на досуге твою задачу. Без лютого JS не обойтись. Плавно менять значения размытия и размера тех же SVG-фильтров через JS, чтобы сделать такой эффект — очень затратно. Производительность даже на этом уровне падает ниже плинтуса.
Скорее всего, чтобы эмулировать альфа-маску, которую в том видео сделали в After Effect, нужно пилить шейдеры. Совершенно не разбираюсь в них, к сожалению.
dom1n1k, это больше про качество передачи цветов, т. е. дешёвые матрицы. Сейчас дизайнеры любят яркие цвета и бледные тени, а когда видят всё это на типичном ноутбуке за 500 долларов, очень расстраиваются.
