LESS 파일을 생성하는 방법과 컴파일하는 방법

개요

A LESS(Leaner Style Sheets)는 CSS(Cascading Style Sheets)를 기본 언어로 하는 동적 전처리 언어입니다. 모든 전처리 언어는 기본 언어의 업그레이드 버전이므로 LESS에도 많은 추가 기능이 있습니다. LESS에는 변수, 상위 선택기, 믹스인, 중첩 선택기와 같은 기능이 있습니다. Java에서는 ".java" 파일의 소스 코드를 컴파일하면 ".class" 출력 파일이 생성됩니다. 마찬가지로 LESS 파일의 ".less" 파일을 컴파일하면 ""라는 새 파일이 생성됩니다. .css" ”를 출력합니다.

방법

LESS 파일을 생성하고 컴파일하려면 다음 단계를 따라야 합니다. -

• 데스크톱이나 명령줄(cmd)에서 터미널을 엽니다. 노드 패키지 관리자(npm)를 사용하여 LESS(Learner Stylesheet) 환경을 컴퓨터에 전체적으로 설치합니다.

으아아아

• 바탕 화면에 폴더를 만듭니다. 이제 텍스트 편집기를 열고 그 안에 LESS 코드를 작성하세요.

• ".less" 코드가 포함된 파일을 "style.less"로 저장하세요.

• 이제 명령줄 인터페이스(CLI)를 열고 cd 폴더 이름 명령을 사용하여 "style.less" 파일을 생성한 하위 폴더로 이동합니다. "cd"는 디렉토리 변경을 의미합니다.

• less 파일이 있는 폴더에 도달한 후, 다음 명령어를 입력하여 "style.less"을 컴파일하면 "style.css" 파일이 생성됩니다.

으아아아

• "style.css" 파일을 열면, 내부 코드는 "style.less" 파일의 변환된 css 코드가 됩니다.

특징

LESS(Leaner Style Sheets) 주요 기능은 −

• Variables− Less 언어에는 변수를 만들고 CSS 속성 값을 저장하는 기능이 있습니다. 더 적은 수의 파일에 변수를 생성하기 위한 접두사는 "@"입니다. 예: @width:10rem, @height:10rem, @ground: 녹색 등.

• Mixing− 이 기능은 스타일 코드를 중복 없이 작성할 수 있는 기능을 제공합니다. 위에서 만든 스타일을 다른 요소의 스타일로 재사용할 수 있습니다.

예를 들어 −

으아아아

알고리즘

1단계 - 코드 작성을 시작하기 전에 위에 제공된 방법을 사용하여 less 컴파일러를 설치합니다. "less" 컴파일러가 설치되어 있는 경우 다음 명령을 사용하여 명령줄 인터페이스에서 확인할 수 있습니다.

으아아아

컴퓨터에 "less" 컴파일러가 설치되어 있으면 해당 버전 번호와 함께 출력이 표시됩니다.

2단계 − 바탕화면에 "LESS"라는 폴더를 만듭니다. 텍스트 편집기에서 HTML 파일을 만들고 그 안에 HTML 상용구 코드를 작성합니다.

3단계 - 같은 폴더에 "style.less" 파일을 생성하고 웹페이지 스타일링을 위한 코드를 작성합니다.

으아아아

4단계 − 이제 명령줄 인터페이스(CLI)를 사용하여 데스크탑에 생성한 하위 폴더로 이동합니다. cd Desktop, cd less 명령을 사용하여 대상에 도달하세요.

5단계 - 이제 명령을 사용하여 "style.less" 파일을 컴파일합니다.

으아아아

6단계 - 파일을 컴파일한 후 "style.css" 파일이 성공적으로 생성되었습니다. 이제 웹페이지가 적절한 스타일로 브라우저에 로드될 준비가 되었습니다.

예

이 예에서는 less 파일이 컴파일되지 않았을 때 웹페이지가 어떻게 보이는지, 컴파일한 후에는 어떻게 보이는지 살펴보겠습니다. 이를 달성하기 위해 CSS 파일과 폴더의 "less" 파일을 연결하는 웹 페이지를 만듭니다.

으아아아

아래 이미지는 "style.less"를 컴파일하면서 출력된 모습인데, 웹페이지를 빌드하고 CSS로 연결하면 스타일 없이 HTML 부분만 보이는 페이지가 나옵니다. "style.less" 파일을 컴파일한 후 파일에 작성된 스타일이 컴파일되고 아래 주어진 적절한 스타일로 웹 페이지의 출력을 표시하는 style.css 파일이 생성됩니다.

결론

Lesser Style Sheets(LESS)는 거대한 "css" 파일을 유지해야 하는 대규모 프로젝트를 구축할 때 매우 유용합니다. 따라서 "LESS"는 코드 혼란을 피할 수 있는 변수 기능을 제공합니다. "CSS"에 비해 "LESS" 코드를 유지하는 것이 더 쉽습니다. 예를 들어 웹사이트의 버튼 스타일을 변경하려면 버튼의 테두리 반경과 배경색을 변경해야 한다고 가정해 보겠습니다. 모든 CSS 요소에서 스타일을 변경하는 대신 변수에서 두 가지만 변경하면 개발자의 작업이 더 쉬워집니다.

위 내용은 LESS 파일을 생성하는 방법과 컴파일하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!