CSS-препроцессоры: less

• Препроцессор – программа, принимающая данные на входе и выдающая на выходе данные, предназначенные для входа другой программы.
• Less (Leaner Style Sheets, компактные таблицы стилей) – это динамический язык стилей, упрощающий и ускоряющий разработку .
• Less – это вложенный метаязык (nested metalanguage): валидный CSS будет валидным less-кодом с аналогичной семантикой.
• Less как программа (lessc) – препроцессор, преобразующий код less в валидный css-код.
• Использование на стороне сервера (из командной строки): устанавливается в node.js командой
  npm install less -g
• Использование в браузере: вставить в документ
  <link rel="stylesheet/less" type="text/css" href="styles.less"> и
  <script src="less.js" type="text/javascript"></script>

Использование переменных: пример

@header-font: Georgia, serif;
@base_unit: 1px;
@color-evil_red: #e40f2f;
@color-name: "color-evil_red";
color: @@color-name;
h1, h2, h3, h4 {
  font-family: @header-font;
}
.large {
  font-family: @header-font;
}
.boxy {
  border: @base_unit @base_unit + 1 @base_unit + 1 @base_unit + 1
}

Миксины (от mixing in): пример

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #222;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}