CSS → Цикл по ассоциативному массиву в LESS

15.06.2015

Например на сайте есть несколько разделов (foo, bar, baz), каждый раздел имеет свой цвет фона (green, blue, red). Способ реализации с помощью цикла по ассоциативному массиву:

// Создаём ассоциативный массив
@body-bg-array:
  foo green,
  bar blue,
  baz red;

// Создаём функцию для обхода массива
.body-bg-generator(@iterator: 1) when (@iterator <= length(@body-bg-array)) {
  @item: extract(@body-bg-array, @iterator);
  @category: extract(@item, 1);
  @color: extract(@item, 2);

  body.category-@{category} {
    background: @color;
  }

  .body-bg-generator((@iterator + 1));
}

// Вызываем функцию
.body-bg-generator();

Результат:

body.category-foo {
  background: green;
}
body.category-bar {
  background: blue;
}
body.category-baz {
  background: red;
}
Похожие записи

Комментарии

Гость
18.06.2015, 21:14

вопрос: почему вы предпочитаете less, а не sass
less имхо выиграет только в возможности компиляции цсс джваскриптом

у sass модуля для друпал нет php компилятора

Гость
23.06.2015, 09:33

ну я типа этого и предположил (только не знал что у друпала есть модуль для лесс, знал только о существовании js компилятора).
Но имхо это не большое преимущество:
1. для работы на локальном компьютере с sass есть compass
2. для того что б изменять на удаленной, прикручивается какой-нибудь модуль grunt для пуша изменений по ftp (т.е. файлы правятся на лок компьютере, после сохранения файла - компиляция сасс и загрузка по фтп на хост).

Сидел на Less где-то 1.5 года. Но поставил Omega, а там sass - пришлось пересаживаться -)). В качестве компилятора стоит компас, который запускается из PhpStorm watcher'ом. Ну или drush omega-guard

В случае с sass лучше не использовать оригинальный компилятор на ruby. Он просто феерический тормоз. Работать просто невыносимо на любом железе.

Лучше накатить node.js, и поставить gulp и gulp-sass. Затем объявить gulpfile.js примерно такого содержания и из терминала вместо sass watch (уж точно не помню как там) юзать gulp watch. Разница просто коллосальная будет. Да и с нодой попроще в принципе чем с руби и его гемами.

Лучше поставить less и забыть обо всём ;)

Добавить комментарий