LESS-설치

이 장에서는 LESS를 설치하는 방법을 단계별로 이해합니다.

LESS를위한 시스템 요구 사항

Operating System − 크로스 플랫폼
Browser Support − IE (Internet Explorer 8 이상), Firefox, Google Chrome, Safari.

LESS 설치

이제 LESS의 설치를 이해합시다.

Step 1 − 우리는 NodeJsLESS 예제를 실행합니다. NodeJ를 다운로드하려면 링크를 엽니 다.https://nodejs.org/en/, 다음과 같은 화면이 나타납니다.

최신 기능 버전의 zip 파일을 다운로드 합니다.

Step 2− 시스템에 Node.js 를 설치하려면 설정을 실행하십시오 .

Step 3− 다음으로 NPM (Node Package Manager)을 통해 서버에 LESS를 설치합니다. 명령 프롬프트에서 다음 명령을 실행하십시오.

npm install -g less

Step 4 − LESS를 성공적으로 설치하면 명령 프롬프트에 다음 줄이 표시됩니다.

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

예

다음은 LESS의 간단한 예입니다.

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

이제 CSS와 매우 유사한 style.less 파일을 생성 해 보겠습니다 . 유일한 차이점은 확장자 가 .less 라는 것입니다 . .html 및 .less 파일 모두 폴더 안에 생성되어야합니다.nodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

다음 명령을 사용하여 style.less 파일을 style.css 로 컴파일 하십시오.

lessc style.less style.css

위의 명령을 실행하면 style.css 파일이 자동으로 생성 됩니다. LESS 파일을 변경할 때마다 위의 명령을 실행해야합니다.cmd그러면 style.css 파일이 업데이트됩니다.

있는 style.css 위의 명령을 실행할 때 파일에 다음 코드를해야합니다 -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

산출

이제 위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

위의 HTML 코드를 hello.htm 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.