Если вы читаете это, вы уже знаете, что CSS — это простой в освоении и использовании язык таблиц стилей, который делает наши веб-сайты блестящими. С появлением новых функций CSS3 возможности еще больше. В этой статье я расскажу об основах LESS. В следующий вторник мы углубимся в это, охватывая миксины, функции и даже больше!
Все это звучит замечательно, но в этой истории есть одна слабость. CSS статичен. И это означает, что мы повторяем код снова и снова в наших таблицах стилей, тем самым делая принцип СУХОЙ (не повторяй себя) только мечтой. К счастью, LESS может это исправить. Согласно lesscss.org , LESS — это язык динамических таблиц стилей. Что делает LESS динамичным, так это то, что он расширяет CSS переменными, миксинами, операциями и функциями, заставляя CSS вести себя больше как язык программирования. Но ключевой особенностью является то, что он также сохраняет оригинальный синтаксис, используемый в CSS, за некоторыми исключениями.
Технически, LESS — это препроцессор CSS. Говоря простым языком, предварительная обработка CSS — это метод расширения набора функций CSS, который сначала записывает таблицы стилей на новом расширенном языке, а затем компилирует код в чистый CSS, чтобы его могли прочитать браузеры. LESS — один из трех популярных CSS-препроцессоров, два других — Sass и Stylus.
Я выбрал LESS, потому что он разработан так, чтобы быть как можно ближе к CSS, поэтому синтаксис практически идентичен вашему текущему CSS, что означает, что вы можете использовать его сразу с существующим кодом. Все, что вам нужно выучить, это новый способ использования того же языка.
LESS может быть запущен на стороне клиента или сервера (с Node.js ). Для этого урока мы будем использовать LESS на стороне клиента, так как его легче начать. Так чего же мы ждем? Давайте начнем!
3, 2, 1… Начало работы
Использовать компилятор JavaScript очень просто. Просто включите скрипт в ваш HTML-код — он будет обрабатывать LESS при загрузке страницы. Затем мы можем включить наш LESS-файл так же, как и стандартную таблицу стилей. Вот код, который нужно поместить между тегами <head> вашей разметки:
<link rel = "stylesheet / less" type = "text / css" href = "styles.less"> <script src = "less.js" type = "text / javascript"> </ script> <script type = "text / javascript"> less.watch (); </ Скрипт>
Ссылка на таблицу стилей идет над сценарием, чтобы обеспечить ее доступность для препроцессора. Обратите внимание, что типичная rel="stylesheet" стала rel="stylesheet/less". Также убедитесь, что значение href указывает на местоположение вашего файла .less .
При желании вы можете less.js скрипту less.js напрямую с сервера Google Code. С этим методом вам даже не нужно загружать скрипт, чтобы использовать его.
<script src = "http://lesscss.googlecode.com/files/less-1.2.2.min.js"> </ script>
Как видите, мы объявили таблицу стилей с rel задано значение stylesheet/less и создали файл с именем styles.less . Весь наш код LESS и CSS теперь будет в этом файле. Мы также объявили файл JavaScript LESS, который скомпилирует наш код LESS в CSS. Этот файл JavaScript будет выполнять некоторые вызовы AJAX для чтения ваших файлов LESS, поэтому вам нужно использовать веб-сервер. Если у вас его нет, просто загрузите WAMP (Windows), MAMP (Mac) или LAMP (Linux), в зависимости от вашей операционной системы, и вы готовы к работе.
Второй скрипт активирует режим «Watch» в LESS, который является функцией на стороне клиента, доступной в режиме разработки. Это обновит CSS на вашей странице всякий раз, когда ваш файл .less будет сохранен с новыми изменениями. Лучше всего то, что он не обновит всю страницу — только нужные кусочки CSS. Это необязательно, но я думаю, что это слишком хорошо, чтобы не использовать.
Если вы style.less файл style.less в своем любимом редакторе, вы заметите, что, поскольку вы редактируете файл .less , по умолчанию подсветка синтаксиса не выполняется. Чтобы это исправить, просто найдите настройки вашего редактора, где вы можете выбрать, какие файлы должны быть связаны с выделением CSS. Синтаксисы LESS и CSS очень близки. Даже если немного отличается, все должно работать нормально.
Импорт
Вы можете импортировать файлы .less , и все переменные и миксины внутри них будут доступны для основного файла. Расширение .less необязательно:
@import "typography.less"; @import "типография";
Если вы хотите импортировать файл CSS и не хотите, чтобы LESS обрабатывал его, просто используйте расширение .css:
@import "typography.css";
Прежде чем пропустить этот шаг, я хочу сказать, что импорт может быть очень мощным. В конце фазы разработки все файлы .less будут скомпилированы и сведены в один чистый файл .css , готовый к работе. Таким образом, вам не нужно беспокоиться о том, сколько запросов к серверу сделает ваша страница и замедлит ли она загрузку страницы. Я думаю, вы согласитесь, что поддерживать один длинный файл .css гораздо сложнее, чем несколько отдельных коротких файлов. Поэтому рекомендуется разбить основной файл на несколько отдельных файлов для цветов, типографики, сетки, сброса и т. Д. Это поможет вам структурировать код более модульным способом.
Комментирование
Комментирование делает ваш код более читабельным. Вы можете использовать комментарии в своих файлах .less же, как и в обычном CSS, но имейте в виду следующее:
Многострочные комментарии сохраняются в LESS:
/* Здравствуйте! Это будет показано в вашем скомпилированном файле * / .class {color: white}
Однострочные комментарии «молчат», они не отображаются в скомпилированном выводе CSS:
// Как дела, чувак? Не волнуйтесь, это не будет отображаться в вашем скомпилированном файле .class {color: white}
Переменные или константы?
LESS дает вам возможность использовать переменные так же, как и в других языках программирования. Это делает чрезвычайно простым задание глобальных стилей, которые могут быть изменены в одном месте, а не сортировку кода для поиска каждого экземпляра этого стиля.
Переменные объявляются и используются с символом @. Вы даете им имя и значение, а затем можете ссылаться на имя переменной в любом месте вашего файла .less :
@name: значение; // синтаксис @красный цвет; // пример background-color: @color; // использование цвет фона: красный; // выход
LESS также позволяет вам определять переменные с именем переменной следующим образом:
@mainColor: красный; @bgColor: 'mainColor'; цвет фона: @@ bgColor; // background-color: red;
Прежде чем перейти к более сложным примерам, вы должны понять, что «переменные» в LESS на самом деле являются константами, что означает, что они могут быть определены только один раз, а их значения не могут быть изменены после установки.
Не думаете ли вы, что для нас, как для людей, гораздо более естественно использовать цвета с их настоящими именами, а не значениями HEX или RGB? Да мужик! Я тоже, приятель, я тоже. К счастью, это легко сделать с помощью LESS. Давайте посмотрим, что я имею в виду:
// Определение цветовой палитры @dimGray: # 696969; @ золото: # FFD700; @greenYellow: # ADFF2F; @deepSkyBlue: # 00BFFF; // Определение цветовой схемы @backgroundColor: @dimGray; @primaryColor: @gold; @secondaryColor: @deepSkyBlue; // Теперь вы можете использовать это так: раздел { background-color: @backgroundColor; цвет: @primaryColor; } раздел ul li { цвет: @secondaryColor; }
Каждый раз, когда мы хотим использовать эти цвета в нашем дизайне, мы используем тот же самый CSS, который мы всегда делаем, но вставляем имя переменной вместо цветового кода. Если вы хотите углубиться, вы можете создать отдельный файл с переменными цвета ( colors.less ) и просто импортировать его в ваш основной файл .less . Таким образом, вам не нужно определять цвета для каждого нового проекта. Просто импортируйте и используйте.
Объявления переменных не будут появляться в выводе. Они могут содержать любое значение свойства CSS и могут быть объявлены в самой внешней области файла, или в любом другом месте, где может появиться свойство CSS. Область применения в LESS очень похожа на большинство языков программирования. Вы можете использовать переменные с одинаковыми именами в разных местах. Переменные и миксины сначала ищутся локально, и если они не найдены, компилятор будет перемещаться вверх по иерархии, пока не найдет их:
@красный цвет; header { @цвет белый; цвет: @color; // белый } нижний колонтитул { цвет: @color; // красный }
Возможно, вы заметили, что во всех приведенных выше примерах я использую венгерские обозначения — строчные для первого слова, затем прописные для первой буквы следующих слов — для моих переменных. Это мое личное предпочтение, оно помогает мне отличать LESS от чистого CSS. При желании вы также можете использовать соглашение об именах в стиле CSS со словами-черточками между строчными буквами. Это полностью зависит от вас.
Мы знаем, как настроить наши переменные, поэтому пришло время принять более сложные решения.
И в следующий раз …
Следите за второй частью этой серии, где я познакомлю вас с более продвинутыми частями LESS — Mixins и другими!