Учебники

LESS — меньше использовать в браузере

Сентябрь 5, 2018

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, как указано ниже — 

<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.

window.less <скрипт тэга <тэг ссылки — это уровень важности.

Атрибуты данных не могут быть записаны в случае верблюда; опция тега ссылки представлена ​​как варианты времени.

Атрибуты данных с нестроковыми значениями должны быть в формате JSON.

Режим просмотра

Режим наблюдения можно включить, установив опцию env в development и вызвав less.watch () после добавления файла less.js. Если вы хотите, чтобы режим наблюдения был включен на временной основе, добавьте #! Watch к URL-адресу. 

<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 можно использовать с FireLESS (он отображает исходное имя файла LESS и номер строки сгенерированных LESS стилей CSS.)

Опции

Перед загрузкой файла сценария less.js необходимо установить параметры в глобальном объекте less .

async — это логический тип Импортированные файлы запрашиваются с опцией асинхронного или нет. По умолчанию это ложь.

dumpLineNumbers — это строковый тип. В выходной файл css информация об исходной строке добавляется, когда задан dumpLineNumbers. Это помогает в отладке конкретного правила.

env — это строковый тип. Конверт может работать на разработку или производство. Разработка устанавливается автоматически, когда URL документа начинается с file: // или он присутствует на вашем локальном компьютере.

errorReporting — при сбое компиляции может быть установлен метод сообщения об ошибках.

fileAsync — это логический тип. Когда страница присутствует с файловым протоколом, она может запросить асинхронный импорт или нет.

функции — это тип объекта.

logLevel — это числовой тип. Он отображает уровень ведения журнала в консоли javascript.

2: информация и ошибки

1: ошибки

0: ничего

poll — в режиме просмотра время отображается в миллисекундах между опросами. Это целочисленный тип; по умолчанию установлено 1000

lativeUrls — URL-адреса корректируются, чтобы быть относительными; по умолчанию эта опция установлена ​​как ложная. Это означает, что URL уже относятся к файлу без записи. Это логический тип.

globalVars — вставляет список глобальных переменных в код. Переменная типа string должна быть включена в кавычки

modifyVars — В отличие от опции глобальной переменной. Он перемещает объявление в конец вашего меньшего файла.

rootpath — устанавливает пути в начале каждого ресурса URL.

useFileCache — использует кеш файла сессии. Кэш в меньшем количестве файлов используется для вызова modifyVars, где все меньше файлов не будут извлечены снова.

46
Share: