МЕНЬШЕ - меньше используйте браузер
Less используется в браузере, когда вы хотите при необходимости динамически компилировать файл Less, а не на стороне сервера; это потому, что less - это большой файл javascript.
Для начала нам нужно добавить скрипт LESS, чтобы использовать LESS в браузере -
<script src = "less.js"></script>
Чтобы найти теги стиля на странице, нам нужно добавить на страницу следующую строку. Он также создает теги стиля с помощью скомпилированного CSS.
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
Параметры настройки
Перед тегом сценария параметры объекта less могут быть установлены программно. Это повлияет на все программное использование less и начальных тегов ссылок.
Например, мы можем установить следующую опцию -
<script>
less = {
env: "development"
};
</script>
<script src = "less.js"></script>
Мы также можем установить параметр в другом формате в теге скрипта, как указано ниже -
<script>
less = {
env: "development"
};
</script>
<script src = "less.js" data-env = "development"></script>
Вы также можете добавить эти параметры в теги ссылок.
<link data-dump-line-numbers = "all"
data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }'
rel = "stylesheet/less" type = "text/css" href = "less/style.less">
При выборе параметров атрибутов необходимо учитывать следующие моменты:
window.less <тег скрипта <тег ссылки - уровень важности.
Атрибуты данных не могут быть записаны в верблюжьем регистре; параметр тега ссылки представлен как параметры времени.
Атрибуты данных с нестроковыми значениями должны быть действительными в формате JSON.
Режим просмотра
Режим просмотра можно включить, установив для параметра env значение development и вызвав less.watch () после добавления файла less.js. Если вы хотите, чтобы режим просмотра был включен на временной основе, добавьте в URL-адрес #! Watch .
<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>
Изменить переменные
Включено изменение времени выполнения переменной LESS. Файл LESS перекомпилируется при вызове нового значения. В следующем коде показано базовое использование переменных изменения -
less.modifyVars({
'@buttonFace': '#eee',
'@buttonText': '#fff'
});
Отладка
Мы можем добавить параметр ! DumpLineNumbers: mediaquery к параметру url или dumpLineNumbers, как упоминалось выше. Mediaquery опция может быть использована с потухшим (Это отображением исходного МЕНЬШЕ имя файла и номер строки МЕНЬШЕ сгенерированными стилей CSS.)
Параметры
Перед загрузкой файла сценария less.js необходимо установить параметры в глобальном объекте less .
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src = "less.js"></script>
async- Это логический тип. Импортируемые файлы запрашиваются независимо от того, включена ли опция async или нет. По умолчанию это ложь.
dumpLineNumbers- Это струнный тип. В выходной файл css информация исходной строки добавляется, когда установлен dumpLineNumbers. Это помогает в отладке конкретного правила.
env- Это струнный тип. Env может работать в процессе разработки или производства. Разработка устанавливается автоматически, когда URL-адрес документа начинается сfile:// или он присутствует на вашем локальном компьютере.
errorReporting - В случае сбоя компиляции можно установить метод сообщения об ошибках.
fileAsync- Это логический тип. Когда присутствует страница с файловым протоколом, она может запросить, следует ли импортировать асинхронно или нет.
functions - Это объектный тип.
logLevel- Это числовой тип. Он отображает уровень ведения журнала в консоли javascript.
2: Информация и ошибки
1: Ошибки
0: ничего
poll- В режиме часов время между опросами отображается в миллисекундах. Это целочисленный тип; по умолчанию он установлен на 1000.
relativeUrls- URL-адреса настраиваются на относительные; по умолчанию эта опция установлена как false. Это означает, что URL-адреса уже относятся к файлу без записей. Это логический тип.
globalVars- Вставляет в код список глобальных переменных. Переменная строкового типа должна быть заключена в кавычки.
modifyVars- В отличие от опции глобальной переменной. Он перемещает объявление в конец вашего файла less.
rootpath - Он устанавливает пути в начале каждого ресурса URL.
useFileCache- Использует кеш файла сеанса. Кэш с меньшим количеством файлов используется для вызова modifyVars, когда все файлы less больше не будут извлечены.