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 기능은 옵션을 설명하는 데 사용됩니다.