Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы css препроцессоры. Далее поговорим немного о них.
Давайте начнем с того, что обычный css нас многим не устраивает. А если вы считает, что все круто, то тогда не читайте дальше, а идите спать. Поэтому некоторые вещи мы делаем на javascript либо что-нибудь эдакое придумываем.
А такой код, наверное, вам уже давно знаком:
.class {
-moz-border-radius 10px 5px /* Firefox */
-webkit-border-radius 10px 5px /* Chrome, Safari */
-khtml-border-radius 10px 5px /* KHTML */
border-radius 10px 5px /* Css 3*/
behavior url(pie/PIE.htc) /* для поддержки плохих IE */
}
Хорошо если вы такое напишите 1 раз, а ведь таких вещей много 
Представьте проект в сотни/тысячи страниц верстки О_о
А если вы работаете в веб-студии, то наверное слышали что-то подобное: «а давай у ссылок поменяет цвет с синего на светло-синий», «может поменяем цвет у границ» и т.д.
После всего этого и верстать то не особо желание то есть. Но жизнь такая штука, что все эволюционирует. И наш css не исключение.
Исходя из вышеописанного и многих других причин фронтендщики/программисты придумали css препроцессоры, которые облегчают работу с обычным css и ускоряют разработку. Поэтому css препроцессор – это «расширенный css», который можно компилировать в обычный css, использую переменные, функции, миксины и другие полезные фичи.
Сразу отметим наиболее популярные css препроцессоры:
- Less проект на gihub
- Sass/Scss проект на gihub
- Stylus проект на gihub
Потом их сравним отдельно по нескольким параметрам, чтобы выбрать наиболее оптимальный для себя. На самом деле их больше чем 3. Лично я рекомендую stylus, т.к. сам им пользуюсь.
Ну и парочка примеров, чтобы действительно понять, что css препроцессоры это круто:
Например, использование переменных:
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
Получаем такой css на выходе:
/* Скомпилированный CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Миксины (что-то на подобие готовых css snippets):
// Sass
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
На выходе получим:
/* Скомпилированный CSS */
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Ну и извращаться по-разному, писать функции:
// Stylus
-pos(type, args)
i = 0
position: unquote(type)
{args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
{args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
absolute()
-pos('absolute', arguments)
fixed()
-pos('fixed', arguments)
#prompt
absolute: top 150px left 5px
width: 200px
margin-left: -(@width / 2)
#logo
fixed: top left
Получаем:
/* Скомпилированный CSS */
#prompt {
position: absolute;
top: 150px;
left: 5px;
width: 200px;
margin-left: -100px;
}
#logo {
position: fixed;
top: 0;
left: 0;
}
Вывод:
Если вы верстаете и вам надоело писать одно и тоже, хотите заниматься реально крутыми вещами и css фреймворки не спасут вас никак. То самое время взяться за изучение css препроцессоров. А если вы говорите, что вам это не надо, то скорее всего вы не раз не пробовали и/или верстаете до сих пор 1 страничные сайты для себя Выделите время и попробуйте, не бойтесь использовать что-то новое.
В общем, всем добра. Пользуйтесь препроцессорами, делайте жизнь лучше, автоматизируйте то, что можно автоматизировать 
Небольшой опрос, прошу проголосовать:
Загрузка ...с/у Талга УтБ
з.ы. начинайте учить, а то будете как девушка на видео :D
Долой консерватизм! Понимаю, нужно двигаться – по направлению вперед (или налево?))) Однако, глянул на примеры написаний кода в препроцессоре. В чем удобство? Ни чуть НЕ умаляя труд автора (спасибо ему!), но “…препроцессоры для верстки самое то…” звучит примерно, как “Для меня верстать в СSS3 – само то!”
Успехов!
css препроцессоры позволяют экономить время, а для разработчика – это много что значит
нужно просто начать использовать их
Я недавно видел интересный белый сайт. Там наверху стоит выключатель. Нажимаешь и фон становиться черным, как будто выключили свет. А цвета букв и других элементов становятся светлым чтобы на черном фоне был виден. Попробуйте такое без операторов if сделать на CSS. Тогда и поймете для чего нужны препроцессоры
переключатель делают на js, просто подключают другой css файл.
а препроцессоры улучшают читабельность и удобство написания css
Проголосовала за LESS, SASS кажется каким-то уж очень запутанным. Но вообще, у меня обычно не настолько большие проекты, чтобы использовать в них препроцессоры, поэтому в 99% случаев хватает обычного CSS.
Хм, очень сомнительно
Надеюсь позже покажу всю фишку и мощь препроцессоров
Не понял если честно в чем идет упрощение.
Все равно для нового проекта прийдется менять значения переменных ведь.
ну так я точно также и просто в своем css файле просто могу изменить значения.
во всех файлах ? где-то вы написали white, где-то #fff и т.д. Можно конечно, автозамену использовать, но это неправильно и менее удобно
если Вы постоянно создаете сайты то препроцессоры для верстки самое то.
Спасибо будем пробовать!хотя я в css и не круглый ноль!
))) прикольно
Спасибо за информацию
