Препроцессоры css

Less, Sass, Stylus

 
Посетитель
small user social cms
Медаль
Сообщений: 106
Доброго времени суток друзья! В ходе развития web разработки появилось новое понятие "Препроцессор", появились различные инструменты для генерации css. Я как то не предавал этому значения, открывал старый добрый Notepad++ и в нем штурмовал стили. Но вот не давно решил посмотреть на требования работодателей к web разработчикам. И вижу что все требуют знаний "Препроцессоров" начиная от фронтендщиков и заканчивая начинающими верстальщиками. Оглядел я эти инструменты поверхностно и вот не пойму, зачем всем работодателям все это? В чем преимущество? Может кто то сможет объяснить на реальных примерах в чем плюсы и минусы препроцессоров? Ну или просто рассказать :)
А то глядя на это:
Код PHP:
  1.  
  2. input-height = 40px // Это переменная
  3. main
  4. display block
  5. margin 0
  6. padding 0
  7. input
  8. height input-height
  9. font-size 1.2em
  10.  
мне кажется что добавляется лишняя писанина и костыли.
Спасибо за ответы :)
Посетитель
no avatar
Почетный донор проекта
Сообщений: 72
Где меньше кода?

Код PHP:
  1.  
  2. .track
  3. color: #fff
  4. &__title
  5. paddding: 10px
  6. &:hover, &:focus
  7. color: blue
  8.  
или

Код PHP:
  1.  
  2. .track { color: #FFF;}
  3. .track__title { padding: 10px;}
  4. .track__title:hover, .track-title:focus { color: blue}
  5.  
Ну и переменные это тоже здорово. Задал к примеру паддинги в переменную. И при верстке не пытаешься вспоминать какие они должны быть.
Редактировалось: 1 раз (Последний: 16 марта 2019 в 17:12)
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 352
DrDooM:
В чем преимущество?
В этой теме все уже давно описано. Преимущества находят только разработчики.
DrDooM:
Может кто то сможет объяснить на реальных примерах в чем плюсы и минусы препроцессоров?
Вот два файла одной сущности Widgets styles , один обычный css другой less. И допустим стоит задача изменить высоту шрифта с font-size:13px; на font-size:15px; . Выполняйте.
В первом файле css Вы будете три раза находить font-size:13px; а в файле less достаточно в начале в списке переменных изменить значение переменой @-widget----title--links_font_size_2: 13px; на @-widget----title--links_font_size_2: 15px; И также можно вынести отдельной переменной любое значение стилевого свойсва и изменять только эту величину.
css
less
Посетитель
small user social cms
Медаль
Сообщений: 106
Старый балбес:
И допустим стоит задача изменить высоту шрифта с font-size:13px; на font-size:15px; . Выполняйте.
Допустим поиск - найти и заменить. Ну это мелочи, а как на счет отдельного заголовка или текста блока? Получается надо задавать переменную для этого блока?
@Kerncraft1:
Ну и переменные это тоже здорово.
Тут не поспоришь, это здорово, а если мы имеем два блока track и необходимо их немного отличить, в этом случае переменные будут для каждого блока.
Посетитель
small user social cms
Медаль
Сообщений: 346
DrDooM:
а как на счет отдельного заголовка или текста блока? Получается надо задавать переменную для этого блока?
тот же вопрос можно задать про css.
а как на счет отдельного заголовка или текста блока? Получается надо создавать новый div?
Спойлер
DrDooM:
Допустим поиск - найти и заменить.
Дело не только в этом. Например с Less, можно быстро решить такую мелочь как режим "День - Ночь" .

А в целом много он чем удобнее, и не удобнее. Здесь спорить можно как в рекламы про Биг Мак laugh
Биг Мак
Редактировалось: 8 раз (Последний: 16 марта 2019 в 23:59)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.