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.