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

Дисклеймер
Это мое личное мнение и я никак не хочу кого-то переубедить.

Привет юный дизайнер, ты уже сделал дизайн свой перШый, ты крут. Говоришь, что пишешь на обычном CSS?! И как, удобно? Мазох!
Давай я тебе расскажу, что такое препроцессоры, а потом мы обсудим это дело.
ВНИМАНИЕ!!! СВОИ СЛОВА.

Препроцессором можно назвать программу которая принимает данные, которые потом же и отдает, только в "другом" виде, для использования их другой программой.

К примеру:

Мы вносим деньги на банк.карточку, чтобы потом использовать их для покупок в интернете.

Помню как пришел на работу - начальник сразу сказал, чтобы выкинул с головы "чистый CSS" ибо будем работать с SASS. По началу думал что толку мало, а это с меня толку толку мало, со своими принципами.

Ну что же, коль за SASS начал, то и продолжу, вот только не нужно от знатоков "Стилус пизже, SCSS понятнее, LessНаш"
Написано сие чудо на Ruby, поэтому не давайте диву, когда в инструкции по установке SASS Вам понадобится установить Ruby, это очень легко, может потом ещё и "рельсы" захотите изучить. )
Помню что Alег хотел Less использовать, надеюсь, что он передумал.
Начну с плюсов:
Нет дужек "{}" - ну, они тут и не нужны, вложенность решает. Rubystyle

.menu
  color: red
  background: white
  padding: 5px

Вложенность - aka Наследование. Пример ниже. Исходя из него - все ссылки в селекторе menu будут иметь зеленый цвет и иметь верхний регистр.

.menu
  color: red
  background: white
  padding: 5px
  a
    color: green
    text-transform: uppercase

Переменные - $darkblue: #264A5C - Привет PHP). Не использую их, ещё как-то не приходилось, яжнедизайнер, но наш верстальщик частенько использует их.

$darkblue: #264A5C
.menu
  color: red
  background: white
  padding: 5px
  a
    color: green
    text-transform: uppercase
  span
    color: $darkblue

НА ЗАМЕТКУ!
Нужно обратить внимание, что он чувствителен к Tab-ам и отступам.
Иначе получите ошибку и на сайте кусок ошибки.

Минусы не буду расписывать, для меня их пока что нету, но вот из "неудобностей" хочу отметить, что большая вложенность и Ваш PhpStorm будет в недоумении делать перенос не туда куда Вам надо + время от времени будете перезагружать "шторм", но это уже не SASS проблемы, а того как PhpStorm с ним работает.

У вот, Far Cry 4 установился, так что можно и отправлять тему на создание и идти играть. Всем спасибо.

Если уж речь зашла о Sass, стоит упомянуть библиотеку Compass.

кто не знает, что это, вряд ли что понял

# Jane (21.11.2015 / 14:46)
кто не знает, что это, вряд ли что понял

та же фигня)

Compass это библиотека готовых решений для Sass. К примеру в этой библиотеке присутствуют Sass-классы для реализации сетки.
Могу предложить следующие видео по теме, если кого либо это заинтересовало.

А нафига.. все и так работает ведь и привычно, логичнее когда есть скобки для глаза

Fublin, ну в CSS нет переменных, нет наследования, нет примесей, в общем много чего полезного нет.

интересная штука)

# Delphinum (21.11.2015 / 15:02)
Fublin, ну в CSS нет переменных, нет наследования, нет примесей, в общем много чего полезного нет.

дай простой пример применения переменной в этом...я не понимаю нифига

Fublin,

$backcolor: #ff0000

.menu
    background: $backcolor;

.header
    background: $backcolor;

.footer
    background: $backcolor;