LESS-플러그인

이 장에서는 사이트의 기능을 확장하기 위해 플러그인을 업로드하는 방법을 이해합니다. 플러그인을 사용하여 작업을 더 쉽게 할 수 있습니다.

명령 줄

명령 줄을 사용하여 플러그인을 설치하려면 먼저 lessc 플러그인을 설치해야합니다. 플러그인은 처음에 less-plugin 을 사용하여 설치할 수 있습니다 . 다음 명령 줄은 clean-css 플러그인을 설치하는 데 도움이됩니다.

npm install less-plugin-clean-css

직접 다음 명령을 사용하여 설치된 플러그인을 사용할 수 있습니다.

lessc --plugin = path_to_plugin = options

코드에서 플러그인 사용

Node에서는 플러그인이 필요하며 옵션 플러그인으로 배열로 전달됩니다.

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

브라우저에서

less.js 스크립트 이전에 플러그인 작성자는 페이지에 javascript 파일을 포함해야합니다.

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

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

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

적은 플러그인 목록

다음 표는 LESS에서 사용 가능한 플러그인을 나열합니다.

포스트 프로세서 / 기능 플러그인

Sr. 아니.	플러그인 및 설명
1	자동 접두사 LESS에서 번역 한 후 CSS에 접두사를 추가하는 데 사용됩니다.
2	CSScomb 스타일 시트의 유지 관리를 개선하는 데 도움이됩니다.
삼	깨끗한 css LESS의 CSS 출력을 축소합니다.
4	CSSWring LESS의 CSS 출력을 압축하거나 축소합니다.
5	CSS 플립 왼쪽에서 오른쪽 (LTR) 또는 오른쪽에서 왼쪽 (RTL)에서 CSS를 생성하는 데 사용됩니다.
6	기능 LESS 자체에 LESS의 기능을 씁니다.
7	방울 여러 파일을 가져 오는 데 사용됩니다.
8	그룹 -css- 미디어 쿼리 Less에 대한 후 처리를 수행합니다.
9	인라인 URL URL을 데이터 URI로 자동 변환합니다.
10	npm-import 적은 비용으로 npm 패키지에서 가져옵니다.
11	간청하다 Less를 후 처리하는 데 사용됩니다.
12	rtl LESS는 ltr (왼쪽에서 오른쪽)에서 rtl (오른쪽에서 왼쪽)로 반전됩니다.

프레임 워크 / 라이브러리 임포터

Sr. 아니.	수입업자 및 설명
1	부트 스트랩 부트 스트랩 LESS 코드는 사용자 지정 LESS 코드보다 먼저 가져옵니다.
2	Bower Resolve Bower 패키지에서 LESS 파일을 가져옵니다.
삼	less.js의 기본 CSS 사용자 정의 LESS 코드 전에 Cardinal의 LESS 코드를 가져옵니다.
4	Flexbox 그리드 가장 일반적으로 가져 오는 프레임 워크 또는 라이브러리 가져 오기 도구입니다.
5	유연한 그리드 시스템 Flexible Grid System을 가져옵니다.
6	이온 이온 프레임 워크를 가져옵니다.
7	Lesshat Lesshat 믹스 인을 가져옵니다.
8	해골 스켈레톤 덜 코드를 가져옵니다.

함수 라이브러리

Sr. 아니.	수입업자 및 설명
1	고급 색상 기능 더 대비되는 색상을 찾는 데 사용됩니다.
2	큐브 헬릭스 감마 보정 값 1을 사용하면 cubehelix 함수는 두 색상 사이의 색상을 반환 할 수 있습니다.
삼	기울기 조작 함수 라이브러리를 나열합니다.

플러그인 작성자 용

LESS는 저자가 적은 것과 결합 할 수 있도록합니다.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

pluginManager 파일 관리자, 포스트 프로세서 또는 방문자를 추가 할 수있는 홀더를 제공합니다.
setOptions 함수는 문자열을 전달합니다.
printUsage 기능은 옵션을 설명하는 데 사용됩니다.