—»     —»   Изучаем LESS: Использование переменных
  Раздел: CSS/Style Sheets   Комментариев: 6  

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



Давайте продолжим наше путешествие в недра LESS, и сегодня мы предлагаем вам окунуться в мир переменных. Если вы не читали первую часть нашего руководства «Изучаем LESS: введение», то не забудьте ознакомиться с ней прежде, чем приступать к чтению сегодняшней статьи.

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

Итак, перейдем сразу к делу – к переменным. Сегодня мы расскажем вам о том, что можно сделать с их помощью.

Синтаксис

Синтаксис в LESS довольно сильно похож на CSS. Создатели LESS достаточно смышленые, и поэтому сделали LESS полностью совместимым с CSS, что означает, что вы можете прописывать код CSS в ваших файлах LESS. Это одинаково удобно с обеих сторон! Просто не забывайте давать имена LESS-файлам в виде .less, а не .css.

Переменные

Переменные в LESS начинаются с символа @. Далее может быть любая комбинация символов или цифр, тире или нижних подчеркиваний. Как только вы дадите имя переменной, не забудьте проставить точку с запятой («;»), и определить переменную. Она может включать hex-код для указания цвета (очень часто встречается), либо строку, заключенную в кавычки. Давайте рассмотрим некоторые переменные, чтобы определить, каким образом они генерируются после того, мы их скомпилируем.

@blue: #00214D;
@red: #CF142B;
@white: #FFF;
@black: #000;
@baseFontSize: 15px;
@baseLineHeight: 22px;

Довольно просто, не правда ли? Теперь вы можете использовать эти переменные в любых собственных LESS-файлах во всем проекте, где вам понадобится использовать hex-код. Это отличный способ сохранять код опрятным и простым к редактированию. Например, нам нравится создавать отдельный LESS-файл, который содержит только переменные, предназначенные для указания шрифтов, цветов, заголовков и так далее.

Когда вы используете свои переменные в LESS-файлах, они компилируются в превосходный код CSS. Давайте посмотрим.

h1 {
color: @red;
}

h2 {
color: @blue;
}

h3 {
color: @black;
}

p {
color: @black;
font-size: @baseFontSize;
line-height: @baseLineHeight;
}

Компилируется в:

h1 {
color: #CF142B;
}

h2 {
color: #00214D;
}

h3 {
color: #000;
}

p {
color: #000;
font-size: 15px;
line-height: 22px;
}

Указываем строки в качестве переменных

Переменные могут отвечать не только за цвета или размеры шрифтов. Мы также можем указать строки в виде переменных, как если бы мы использовали javascript в PHP. Это может оказаться очень важным, если использовать в дизайне иконические шрифты (Icon Fonts), так как их лучше всего указывать с помощью псевдо-элементов, что позволяет нам сохранить доступ к ним, вместо того, чтобы просто впечатывать символы в конкретный элемент класса. Давайте рассмотрим переменные в виде строк.

@name: "Alex Ball";
@description: "I love to write and code.";

a:before {
content: @description;
}

Когда приведенный выше код компилируется, мы получаем следующее.

a:before {
content: "I love to write and code.";
}

Если вы собираетесь использовать иконические шрифты в веб-дизайне вместе с LESS, то вам обязательно нужно ознакомиться с замечательными статьями от Криса Койира (Chris Coyier), посвященными этому процессу.

Подытожим ...

На этом мы хотим завершить наше обсуждение переменных в LESS, и хотя эта часть была значительно короче предыдущей, поверьте, она не менее значимая и ценная на практике. Как мы уже отмечали в введении, скачивайте LESS.app, и попробуйте использовать переменные в собственных проектах. Вы будете удивлены, насколько быстро пойдет ваш процесс разработки.

В следующем уроке мы изучим mixin’ы, одно из самых сильных преимуществ LESS.

Если у вас возникли какие-либо вопросы по переменным или по поводу того, как применять их в LESS, либо вы столкнулись с проблемой при компилировании, то не стесняйтесь оставлять комментарии ниже! Мы ответим сразу, как только будет возможность.

Скоро увидимся!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 6253   |   Оставлено комментариев: 6
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 22 мая 2012 @ 21:32
Написал: Webaнутый — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отлично. Хотим побольше подобных статей, в т.ч и по адаптивной вёрстке.
Так держать ! (:
Комментарий #2: 22 мая 2012 @ 21:43
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Webaнутый, все будет :)
Комментарий #3: 14 августа 2012 @ 16:28
Написал: Денис — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
У меня вопрос. Вы говорите
Как только вы дадите имя переменной, не забудьте проставить точку с запятой («;»), и определить переменную.
. Судя по этой цитате нужно сделать так: @color; 369;
И еще один вопрос в части статьи "Указываем строки в качестве переменных". У вас в листинге написан код:
@name: "Alex Ball";
@description: "I love to write and code.";
...

Что значит такое @name: "Alex Ball"; Вы указали эту переменную, но ни где не применили. Я предполагаю, что это название шрифта.
Комментарий #4: 14 августа 2012 @ 16:50
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А где написано про "Оболочки для переменных"?
Комментарий #5: 14 августа 2012 @ 17:52
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Денис, это подразумевает следующую последовательность действий, похожую как в зен-кодинге:

1 @color:; - дали имя переменной и не забыли про точку с запятой
2 @color: 369; - определили переменную

@name: "Alex Ball"; - это переменная с именем "name" с текстовой величиной "Alex Ball", просто автор материала ее нигде, почему-то не применил.

mrnobody, это ошибка перевода. Исправлено.
Комментарий #6: 11 февраля 2013 @ 07:12
Написал: lexx — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Создатели лесс вдохновились языками программирования при его создании. А предусмотрели ли они ошибки? Например я где-нибудь использую переменную @blue, но опечатываюсь (бывает) и пишу @bluue. Эту лишнюю буковку u ведь трудно будет отследить. В итоге все стили летят к чертям. Что делать? Использую simpLESS.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31