nonlux

Ребят, чего мучаетесь?
1. Берем пипетку. Цвет у самого маркера один. У следующего темнее но он один ( не градиент). Просто визуально так выглядит.
Ну а дальше по решению Дима Турков
И усе профит.
+ не пишем то, не нужно.
Т.е не

Как сверстать такое, чтобы кол-во пунктов было не важно

А просто сверстать нужное количество.

- использовать php ruby phyton
- использовать cms
- использовать генератор статических сайтов

RTFM !

getbootstrap.com/javascript/#markup

Less:

.blocks(@col) {
  & .block {
    color: @col;
  }
}

.blocks(#fff);

.header, .footer {
  .blocks(#bbb);
}

css:

.block {
  color: #ffffff;
}
.header .block,
.footer .block {
  color: #bbbbbb;
}

gulp -watch + gulp -livereload дадут необходимую функционал.

В принципе можно еще туда и sass компиляцию засунуть. тогда вообще ничего не надо будет запускать, обновлять. Просто пишите код )

Почитайте о map файлах. Все нормальные компрессоры и препроцессоры умею их делать.

Суть такая:
браузер качает сжатый файл.
если открываете профилировщик, он подгружает не сжатый файл (файлы) и показывает все ссылки на исходные файлы.

Ну а чтобы эти файлы на лету появлялись легче всего при разработке настроить какой-нибудь watcher для сборщика (см. ответы выше).

Ну есть еще более сложный вариант, но он лишний.
Файлы отдает не веб-сервер, а движек (он уже сам разбирается с сжатием и сборкой)

Browser cache, web-sever cache

Кхм. Вам пофиг кто отдает страницу.

Алгоритм такой на сколько я разобрался.
В gulp watch запускается livereload сервер
Плагин обращается к серверу и если в одной из задач был вызван livereload, то плагин обновляет страницу (просто обнавляет - т.е рендерит ее нужный php движек)

Но ГЛАВНОЕ !!!! НАДО ВКЛЮЧИТЬ ПЛАГИН! ( щеклуть на его иконку!!!) Я из-за этого полчаса воевал со со своим окружением )).

Пример работы с gulp