MNIEJ - wtyczki

W tym rozdziale zrozumiemy, w jaki sposób można załadować wtyczkę, aby rozszerzyć funkcjonalność witryny. Możesz użyć wtyczek, aby ułatwić Ci pracę.

Wiersz poleceń

Aby zainstalować wtyczkę za pomocą wiersza poleceń, musisz najpierw zainstalować wtyczkę lessc. Wtyczkę można na początku zainstalować za pomocą less-plugin . Poniższy wiersz poleceń pomoże Ci zainstalować wtyczkę clean-css -

npm install less-plugin-clean-css

Bezpośrednio możesz użyć zainstalowanej wtyczki, używając następującego polecenia -

lessc --plugin = path_to_plugin = options

Korzystanie z wtyczki w kodzie

W Node wtyczka jest wymagana i jest przekazywana w tablicy jako opcja wtyczki do less.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

W przeglądarce

Przed skryptem less.js autor wtyczki powinien umieścić na stronie plik javascript.

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

<script>
less = {
   plugins: [plugin]
};
</script>

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

Lista mniej wtyczek

Poniższa tabela zawiera listę wtyczek dostępnych w LESS.

Wtyczki postprocesora / funkcji

Sr.No. Wtyczki i opis
1 Autoprefixer

Służy do dodawania przedrostków do CSS po przetłumaczeniu z LESS.

2 CSScomb

Pomaga usprawnić konserwację arkusza stylów.

3 clean-css

Minimalizuje wynik CSS z LESS.

4 CSSWring

Kompresuje lub minimalizuje dane wyjściowe CSS z LESS.

5 css-flip

Służy do generowania CSS od lewej do prawej (LTR) lub od prawej do lewej (RTL).

6 Funkcje

Zapisuje funkcję MNIEJSZY w samym MNIEJ.

7 glob

Służy do importowania wielu plików.

8 group-css-media-queries

Wykonuje przetwarzanie końcowe dla Less.

9 inline-urls

Automatycznie konwertuje adres URL na identyfikator URI danych.

10 npm-import

Importuje z pakietu npm za mniej.

11 proszę

Służy do przetwarzania końcowego Less.

12 rtl

LESS jest odwracane z ltr (od lewej do prawej) do rtl (od prawej do lewej).

Importerzy ram / bibliotek

Sr.No. Importerzy i opis
1 Bootstrap

Kod Bootstrap LESS jest importowany przed niestandardowym kodem LESS.

2 Bower Resolve

Pliki LESS są importowane z pakietów Bower.

3 Kardynał CSS dla less.js

Przed niestandardowym kodem LESS importowany jest kod LESS dla Cardinal.

4 Siatka Flexbox

Najczęściej importowany Framework lub importer bibliotek.

5 Elastyczny system siatki

Importuje system elastycznej siatki.

6 joński

Importuje szkielet jonowy.

7 Lesshat

Importuje miksy Lesshat.

8 Szkielet

Importuje kod bez szkieletu.

Biblioteki funkcji

Sr.No. Importerzy i opis
1 zaawansowane funkcje kolorów

Służy do wyszukiwania bardziej kontrastowych kolorów.

2 cubehelix

Używając wartości korekcji gamma równej 1, funkcja cubehelix może zwrócić kolor między dwoma kolorami.

3 listy

Zawiera listę bibliotek funkcji manipulacyjnych.

Dla autorów wtyczek

MNIEJ pozwalają autorowi łączyć się z mniej.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager zapewnia uchwyt, który może dodawać menedżerów plików, postprocesorów lub gości.

  • setOptions funkcja przekazuje ciąg.

  • printUsage funkcja służy do wyjaśnienia opcji.