Изучаем LESS: Переменные

Изучаем LESS: Переменные

От автора: мы продолжаем серию статей «Изучаем LESS», и сегодня мы погрузимся в прекрасный мир, где царят LESS Переменные. Обязательно прочтите Вступление, если вы впервые столкнулись с этой серией.

Итак, давайте рассмотрим переменные LESS и то, что вы можете с ними делать.

Синтаксис

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

Переменные

Переменные в LESS начинаются со знака @. Далее следует любая комбинация букв и цифр, тире и подчеркиваний. После того, как вы задали имя переменной, указывается двоеточие (как в CSS), за которым следует определение переменной. Для этого можно использовать шестнадцатеричный код цвета (очень популярно) или строку, заключенную в кавычки. Давайте рассмотрим несколько переменных и посмотрим, как они будут отображаться после компиляции.

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Это отличный способ сохранить код чистым и легко управляемым. Мне, например, нравится задавать один файл 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 в веб-дизайне, так как лучше всего установить 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.";
}

Если вы планируете использовать в веб-дизайне Icon Fonts и LESS, обязательно прочитайте замечательные статьи Криса Койера о Icon Fonts, в которых он рассказывает о том, как обеспечить их доступность; вы также найдете в этих статьях ссылки на различные наборы шрифтов: платные и бесплатные.

Заключение

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

Автор: Alex Ball

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree