Комплексное введение в Less: Mixins

 header { 
  color: black; 
}

header nav {
  font-size: 12px;
}

header .logo {
  width: 300px;
}

header .logo:hover {
  text-decoration: none;
}

Можно написать так:

 header {
  color: black;
  nav {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Или так:

 header    { color: black;
  nav     { font-size: 12px }
  .logo   { width: 300px;
    &:hover { text-decoration: none }
  }
}

Назовите это, используйте это, и повторно используйте это. Это так просто?

Что если вы хотите сгруппировать миксины в отдельные пакеты для последующего повторного использования или для распространения? Less дает вам возможность сделать это, вложив миксины в набор правил с идентификатором, например #namespace.

Например:

 #fonts {
  .serif (@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: @weight;
    font-size: @size;       
    line-height: @lineHeight;
  }
  .sans-serif (@weight: normal, @size: 14px, @lineHeight: 20px) { 
    font-family: Arial, Helvetica, sans-serif;
    font-weight: @weight;
    font-size: @size;       
    line-height: @lineHeight;
  }
  .monospace (@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Lucida Console", Monaco, monospace
    font-weight: @weight;
    font-size: @size;       
    line-height: @lineHeight;
  }
}

Затем, чтобы вызвать миксин из этой конкретной группы, вы делаете это:

 body {
  #fonts > .sans-serif;
}

И вывод:

 body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 14px;       
  line-height: 20px;
}

Не забудьте добавить пустые скобки, когда вы определяете миксины, которые не принимают параметров. Таким образом, первоначальное определение не включается в отображаемый CSS, а только в коде, где используется миксин. Это сокращает ваш выходной код и позволяет вам хранить библиотеку определений, которые не увеличивают вес выходных данных до тех пор, пока они не будут фактически использованы.

Некоторые особые случаи

Строковая интерполяция

Строковая интерполяция — это удобный способ вставить значение переменной прямо в строковый литерал. Переменные могут быть встроены в строки с помощью конструкции @{name}

 @baseURL: "http://example.com";
border-image: url("@{base-url}/images/border.png");

Спасаясь

Иногда вам может потребоваться вывести значение CSS, которое либо является недопустимым синтаксисом CSS, либо использует собственный синтаксис, который Less не распознает. Если это так, просто поместите значение в строку с префиксом оператора ~, например:

 body {
  @size ~"20px/80px";
  font: @size sans-serif;
}

Это называется «экранированным значением», что приведет к:

 body {
  font: 20px/80px sans-serif;
}

Я готов. Покажите мне магию, пожалуйста.

Идея Less заключается в том, чтобы ускорить и упростить только этап разработки. Это означает, что то, что запускается на вашем конечном веб-сайте, должно быть простым, старым CSS, а не Less. К счастью, это можно сделать очень легко. Все, что вам нужно сделать, это получить компилятор Less и позволить ему делать свою работу. Я рекомендую WinLess (для Windows) и LESS.app (для OS X)

Здесь я объясню вам, как работать с WinLess. Сначала скачайте и установите его. Когда вы запускаете WinLess, все, что вам нужно сделать, это перетащить папку с файлами .less Чтобы настроить поведение WinLess, откройте «Файл»> «Настройки». Я оставляю флажок «Сократить по умолчанию» неактивным, потому что хочу, чтобы мой файл был читабельным, и минимизирую свои файлы только при выводе в производство. Я проверяю другие два параметра ниже, потому что я не хочу компилировать вручную каждый раз, когда я сохраняю файл, и потому, что я хочу знать, успешна ли компиляция. Кстати, для целей обучения вы можете использовать WinLess Online Less Compiler — идеально, если вы хотите быстро что-то попробовать.

Для работы с LESS.app вы можете проверить видеоурок на домашней странице его сайта.

Есть еще один вариант для тех из вас, кто не использует ПК или Mac. Вы можете получить Хруст! , который является кросс-платформенным приложением AIR. Crunch — это не только компилятор Less, но и редактор Less. Это круто, потому что Crunch — единственный редактор, насколько мне известно, который дает подсветку синтаксиса для файлов .less Попробуйте, чтобы понять, что я имею в виду. Знаешь что? Я расскажу тебе мой маленький секрет. На самом деле, я использую оба из них — WinLess для компиляции и Crunch для редактирования. Звучит круто, а?

OK. Я действительно очарован. Где я могу найти больше?

Вот маленький бонус для вас. Это краткий список ресурсов Less, которые можно сразу использовать в ваших проектах. Есть некоторые готовые к использованию Less миксины и переменные, а также пара проектов, которые используют Less в качестве своей базы.

• Официальная Меньшая документация — хорошо. Это не может быть использовано в ваших проектах 🙂 Однако вы должны регулярно проверять наличие обновлений и новых функций, добавленных в язык.
• Less Elements — коллекция полезных миксинов Less.
• Preboot.less — еще одна коллекция миксов и переменных Less.
• Semantic Grid System — простой и удобный в использовании инструмент верстки страниц. Он поддерживает фиксированные, текучие и гибкие макеты. И, кстати, вы также можете использовать его с Sass и Stylus (если вы еще не влюбились в Less).
• Centage — если вам нужна полная текучесть и гибкость, вы обязательно должны это проверить.
• Perkins CSS3 Less Framework — приятный и богатый фреймворк Less, который использует HTML5 и CSS3.

Если вы хотите найти еще больше ресурсов о Less, GitHub — это то, что вам нужно. Как вы увидите, там есть множество вкусностей. Чего же ты ждешь? Иди и проверь их.

Несколько заключительных слов

Вкратце, Less — это быстрый, простой и современный способ написания и создания кода CSS. Так что не будьте слишком консервативны, просто попробуйте. Потратьте некоторое время с Less, и вы будете создавать и настраивать сложные таблицы стилей быстрее и проще, чем когда-либо прежде. Желаю вам счастливого программирования и всегда помните: «Меньше значит больше»

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам SitePoint и интерактивным онлайн-курсам, таким как Launch into Less .

Комментарии к этой статье закрыты. Есть вопрос о Меньше? Почему бы не спросить об этом на наших форумах ?