Давайте продолжим наше путешествие в недра 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, либо вы столкнулись с проблемой при компилировании, то не стесняйтесь оставлять комментарии ниже! Мы ответим сразу, как только будет возможность.