Css препроцессоры часть 1

less-stylus-sass

что такое css препроцессоры

Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы 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, использую переменные, функции, миксины и другие полезные фичи.

Сразу отметим наиболее популярные css препроцессоры:

Потом их сравним отдельно по нескольким параметрам, чтобы выбрать наиболее оптимальный для себя. На самом деле их больше чем 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 страничные сайты для себя :) Выделите время и попробуйте, не бойтесь использовать что-то новое.

В общем, всем добра. Пользуйтесь препроцессорами, делайте жизнь лучше, автоматизируйте то, что можно автоматизировать ;)

Небольшой опрос, прошу проголосовать:

Какой css препроцессор вы предочитаете?

View Results

Загрузка ... Загрузка ...

с/у Талга УтБ

з.ы. начинайте учить, а то будете как девушка на видео :D



Комментарии к статье

  • #

    Долой консерватизм! Понимаю, нужно двигаться – по направлению вперед (или налево?))) Однако, глянул на примеры написаний кода в препроцессоре. В чем удобство? Ни чуть НЕ умаляя труд автора (спасибо ему!), но “…препроцессоры для верстки самое то…” звучит примерно, как “Для меня верстать в СSS3 – само то!”
    Успехов!

    • #

      css препроцессоры позволяют экономить время, а для разработчика – это много что значит :)
      нужно просто начать использовать их ;)

  • #

    Я недавно видел интересный белый сайт. Там наверху стоит выключатель. Нажимаешь и фон становиться черным, как будто выключили свет. А цвета букв и других элементов становятся светлым чтобы на черном фоне был виден. Попробуйте такое без операторов if сделать на CSS. Тогда и поймете для чего нужны препроцессоры

    • #

      :) ты немного не понял суть.
      переключатель делают на js, просто подключают другой css файл.
      а препроцессоры улучшают читабельность и удобство написания css

  • #

    Проголосовала за LESS, SASS кажется каким-то уж очень запутанным. Но вообще, у меня обычно не настолько большие проекты, чтобы использовать в них препроцессоры, поэтому в 99% случаев хватает обычного CSS.

    • #

      Хм, очень сомнительно :)
      Надеюсь позже покажу всю фишку и мощь препроцессоров *YES*

  • #

    Не понял если честно в чем идет упрощение.
    Все равно для нового проекта прийдется менять значения переменных ведь.
    ну так я точно также и просто в своем css файле просто могу изменить значения.

    • #

      во всех файлах ? где-то вы написали white, где-то #fff и т.д. Можно конечно, автозамену использовать, но это неправильно и менее удобно ;) если Вы постоянно создаете сайты то препроцессоры для верстки самое то.

  • #

    Спасибо будем пробовать!хотя я в css и не круглый ноль! *DANCE*

  • #

    ))) прикольно

  • #

    Спасибо за информацию ;) ;) ;)