Отладка с помощью Less.js

Тот факт, что Less.js рассматривает CSS как своего рода язык программирования, дает нам возможность делать синтаксические ошибки, что при использовании только CSS единственное, что мы получим, это то, что стиль не будет работать должным образом, но в Less мы Я бы сгенерировал, что бы ни один стиль не смотрел
Вот почему очень важно иметь инструменты, которые позволяют нам видеть ошибки в процессе разработки, поэтому мы тратим меньше времени на размещение больших блоков кода, что и дает сбой.
Из-за природы Less.js разработка, ориентированная на тестирование, пока невозможна, поэтому многократную отладку, чтобы не говорить, всегда следует делать в браузере, что не очень оптимально, но это решение у нас под рукой,

требования

1 - Для того, чтобы выполнить этот урок, нам понадобятся базовые знания и представления о CSS, поскольку, хотя он и сфокусирован на Меньше, нам все же нужно знать, как создаются стили и как минимум используются базовые свойства, чтобы мы могли иметь правильную ссылку, когда мы видим возможные ошибки.
2 - У нас должна быть среда, настроенная на использование Less, то есть папка с загруженным проектом и доступная для использования.
3 - Если мы используем Google Chrome, нам понадобится веб-сервер в стиле Apache, так как этот браузер для безопасности блокирует локальные запросы Less, если мы не хотим эту настройку, мы можем использовать Firefox .
4. Наконец, нам также нужен текстовый редактор для написания примеров. Это может быть Sublime Text или NotePad ++. Оба редактора имеют возможность добавлять дополнения для подсветки синтаксиса JavaScript и CSS . Кроме того, важно, чтобы в нашей системе были разрешения на сохранение этих файлов в выбранном месте.

Отладка прямо на Меньше

Один из первых вариантов, который у нас есть, - это печатать наш код и синтаксические ошибки непосредственно в нашей среде с помощью библиотеки less.js. Это достигается в среде разработки путем запуска нашей библиотеки непосредственно на клиенте, в данном случае в браузере.,
Это очень важно, так как, когда мы напрямую компилируем таким образом при возникновении ошибки, он не генерирует никакого стиля, поэтому в случае сбоя мы увидим только нашу HTML- структуру, но без CSS . Чтобы сделать этот тип отладки, мы можем следовать руководству следующего кода:

 var less = {env: 'development'}; Отладка с помощью Less Js
Показать ошибки в Меньше 

Первое, что мы видим, это то, что мы включаем пользовательский файл с именем error-style. Если этот файл не будет содержать собственный код, для которого мы будем его отлаживать, то мы должны определить переменную с именем less и назначить элемент env, к которому мы будем обращаться разработки, затем мы включаем нашу библиотеку less.js и с этой переменной мы сообщаем, что если только не произойдет ошибка, мы выдадим сообщение, из-за которого вы не сможете скомпилировать код.
В нашем файле style-error.less мы разместим следующий ошибочный код:

 h1 {color: network; размер шрифта: 3em; 

Как мы заметили, нам нужно закрыть ключ в конце, конечно, аналитически эта ошибка выглядит немного простой и глупой, но когда у нас есть сотни строк, совершенно очевидно, что в какой-то момент мы забываем закрыть ключ. Во время выполнения нашего документа мы увидим, как Less выдает ошибку в браузере:

Как мы видим, компилятор в браузере Less указывает, что есть что-то, что не распознает и что мы, вероятно, что-то забыли, в этом случае мы знаем, что это был ключ, который мы не закрывали.

Типы ошибок, которые мы можем найти

Здесь мы должны сделать небольшую паузу, мы уже видели изначально, как мы можем получить ошибки в Less, однако мы еще не знаем, что означают ошибки, которые мы можем получить, поэтому мы собираемся определить наиболее важные, чтобы иметь достаточную основу для Знайте, что мы будем искать и какие возможные решения мы можем применить.
FileError

Эта ошибка относится к неудачному импорту другого файла, если мы помним в наших файлах меньше, мы можем использовать инструкцию @import для включения других файлов для организации и расширения наших функций.
SyntaxError

$config[ads_text5] not found

Эта ошибка возникает, когда мы неправильно пишем инструкцию или неправильно размещаем свойство, например, когда объявляем свойство вне блока.
На следующем рисунке мы видим, как выглядит ошибка этого типа, мы достигаем ее с помощью следующего кода:

 цвет: чистый; h1 {font-size: 3em; } 

Там, где мы ясно видим, что свойство color: network находится в неправильном положении, давайте посмотрим, как оно выглядит, если мы запустим его в браузере:

ParseError

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

$config[ads_text6] not found

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

 h1 {color: network; размер шрифта: 3em; ширина: красная; } 

Предыдущий код будет скомпилирован без каких-либо проблем, хотя мы ясно видим, что свойство width должно иметь измерение размера, а не цвет, если мы выполняем его в нашем браузере, файл выполняется и работает:

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

Используйте инструменты браузера

Другой метод, который мы можем использовать для отладки нашего кода, - это инструменты для разработчиков браузеров, в настоящее время основные браузеры, такие как Chrome и Firefox, имеют инструменты, которые позволяют нам понять, как HTML формируется и как ведет себя поведение. то же самое и таким образом мы можем использовать их, чтобы увидеть наш код меньше .
Это дает нам более высокий уровень отладки, особенно когда мы не можем использовать переменную env, которую мы видели в предыдущем разделе, с этим типом отладки у нас может не быть обнаружения предыдущих ошибок, но мы можем обнаружить проблемы, такие как стили, которые перекрываются или имеют ошибочные свойства, как мы видели в предыдущем примере, где Less не обнаружил ширину: красный; например.
Чтобы продемонстрировать этот способ отладки, мы создадим следующий стиль в нашем файле error-style.less :

 h1 {font-size: 3em; цвет: помидор; } header {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }} 

Тогда в нашем HTML- файле, где мы вызываем библиотеки, должно быть следующее:

 Отладка с помощью Less Js
Отладка с Меньше 
Здесь мы видим заголовок страницы 
 © 2015 Solvetic 

Следующим шагом является запуск нашего HTML в браузере, где мы должны получить следующее:

Теперь, чтобы сделать соответствующую отладку, нам просто нужно щелкнуть правой кнопкой мыши по одному из заголовков и найти опцию, которая говорит нам, чтобы проверить элемент, с этим консоль отладки браузера будет отменена.
Оказавшись там, мы можем проверить наш второй заголовок и увидим что-то интересное, есть свойство, которое вычеркивается, и это потому, что при перекрытии оно исключается для этого элемента, с этим мы демонстрируем, как мы можем найти проблемы и ситуации, которые избегают компилятора Less . Давайте посмотрим на следующем изображении, как выглядит это действие:

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

$config[ads_text5] not found