MNIEJ - mniej w przeglądarce

Less jest używany w przeglądarce, gdy chcesz dynamicznie skompilować plik Less w razie potrzeby, a nie po stronie serwera; Dzieje się tak, ponieważ less to duży plik javascript.

Na początek musimy dodać skrypt LESS, aby używać LESS w przeglądarce -

<script src = "less.js"></script>

Aby znaleźć tagi stylu na stronie, musimy dodać następujący wiersz na stronie. Tworzy także tagi stylu ze skompilowanym css.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Opcje ustawień

Przed znacznikiem script można programowo ustawić opcje dla obiektu less. Wpłynie to na całe programowe użycie less i początkowe tagi linków.

Na przykład możemy ustawić opcję w następujący sposób -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Możemy również ustawić opcję w innym formacie w tagu script, jak określono poniżej -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Możesz również dodać te opcje do znaczników łączy.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Punkty, które należy wziąć pod uwagę w przypadku opcji atrybutów, to -

window.less <tag skryptu <znacznik linku to poziom ważności.
Atrybuty danych nie mogą być zapisane w przypadku wielbłąda; opcja tagu linku jest reprezentowana jako opcje czasu.
Atrybuty danych z wartościami innymi niż ciągi powinny być poprawne w formacie JSON.

Tryb oglądania

Tryb obserwatora można włączyć, ustawiając opcję env na programowanie i wywołując less.watch () po dodaniu pliku less.js. Jeśli chcesz, aby tryb oglądania był tymczasowo włączony, dodaj #! Watch do adresu URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Modyfikuj zmienne

Modyfikacja zmiennej LESS w czasie rzeczywistym jest włączona. Plik LESS jest rekompilowany po wywołaniu nowej wartości. Poniższy kod przedstawia podstawowe użycie modyfikacji zmiennych -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Debugowanie

Możemy dodać opcję ! DumpLineNumbers: mediaquery do url lub opcję dumpLineNumbers , jak wspomniano powyżej. Opcja mediaquery może być używana z FireLESS (wyświetla oryginalną LESS nazwę pliku i numer linii stylów CSS generowanych LESS).

Opcje

Przed załadowaniem pliku skryptu less.js należy ustawić opcje w globalnym obiekcie 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- To jest typ boolowski. Zaimportowane pliki są żądane bez względu na to, czy z opcją asynchroniczną, czy nie. Domyślnie jest to fałsz.
dumpLineNumbers- To jest ciąg. W wyjściowym pliku css informacje o wierszu źródłowym są dodawane po ustawieniu właściwości dumpLineNumbers. Pomaga w debugowaniu konkretnej reguły, z której pochodzi.
env- To jest ciąg. Środowisko może działać na etapie rozwoju lub produkcji. Rozwój jest ustawiany automatycznie, gdy adres URL dokumentu zaczyna się odfile:// lub jest obecny na komputerze lokalnym.
errorReporting - W przypadku niepowodzenia kompilacji można ustawić metodę zgłaszania błędów.
fileAsync- To jest typ boolowski. Gdy strona jest obecna z protokołem pliku, może zażądać, czy importować asynchronicznie, czy nie.
functions - To jest typ obiektu.
logLevel- To jest typ liczbowy. Wyświetla poziom logowania w konsoli javascript.
- 2: Informacje i błędy
- 1: Błędy
- 0: Nic
poll- W trybie oglądania czas jest wyświetlany w milisekundach między ankietami. Jest to typ całkowity; domyślnie jest to 1000.
relativeUrls- Adresy URL mają być względne; domyślnie ta opcja jest ustawiona na false. Oznacza to, że adresy URL są już względne w stosunku do pliku bez wpisu. Jest to typ boolowski.
globalVars- Wstawia listę zmiennych globalnych do kodu. Zmienna typu string powinna być umieszczona w cudzysłowie
modifyVars- W przeciwieństwie do opcji zmiennej globalnej. Przenosi deklarację na koniec twojego less pliku.
rootpath - Ustawia ścieżki na początku każdego zasobu URL.
useFileCache- Używa pamięci podręcznej plików sesji. Pamięć podręczna w less plików jest używana do wywoływania zmodyfikowanych zmiennych, gdzie wszystkie less plików nie zostaną ponownie pobrane.