МЕНЬШЕ - меньше используйте браузер

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 больше не будут извлечены.