xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

Например на сайте есть несколько разделов (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;
}
Похожие записи

Комментарии RSS

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

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

ну я типа этого и предположил (только не знал что у друпала есть модуль для лесс, знал только о существовании 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 и забыть обо всём ;)

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании