명령줄에서 SASS 코드를 실행하는 데 사용되는 명령은 무엇입니까?

SASS는 Syntropically Awesome Style Sheets의 약어입니다. SCSS 코드를 컴파일하여 CSS(Cascading Style Sheets)로 변환하는 전처리기입니다. CSS의 상위 집합입니다.

이 튜토리얼은 터미널을 사용하여 SCSS 코드를 컴파일하는 방법을 가르쳐줍니다.

터미널에서 SASS를 실행하는 단계

사용자는 터미널에서 SASS 코드를 실행하려면 아래 단계를 따라야 합니다.

• 1단계 - 사용자는 로컬 컴퓨터에 Node.JS를 설치해야 합니다. 그렇지 않은 경우 https://nodejs.org/en/download를 방문하여 다운로드하여 설치하세요.

• 2단계 - 이제 Node 프로젝트를 생성해야 합니다. 프로젝트 디렉터리에서 터미널을 열고 터미널에서 다음 명령을 실행하여 새 NodeJS 프로젝트를 시작합니다.

으아아아

• 3단계 - 이제 터미널에서 다음 명령을 실행하여 현재 노드 프로젝트에 SASS를 설치합니다.

으아아아

• 4단계 - 현재 프로젝트의 package.json 파일을 열고 "scripts" 개체에 다음 줄을 추가합니다.

으아아아

• 5단계 - 프로젝트 디렉터리에 SCSS 및 CSS 폴더를 만듭니다. 또한 SCSS 디렉터리에 style.scss 파일을 추가하고 CSS 디렉터리에 style.css 파일을 추가합니다.

프로젝트 디렉토리 구조입니다.

• 6단계 - 이제 style.scss 파일에 다음 SASS 코드를 추가하세요.

으아아아

• 7단계 - 이제 터미널에서 다음 명령을 실행하여 SCSS 코드를 컴파일합니다.

으르르르르

• 8단계 - style.css 파일에 다음 출력 코드가 생성됩니다. 그렇지 않은 경우 스크립트가 실행되는 동안 scss 파일의 코드를 변경하십시오.

으아아아

이제 사용자가 style.scss 파일을 변경할 때마다 style.css 파일의 출력도 변경됩니다.

CSS 대신 SASS를 사용하는 이유는 무엇인가요?

CSS보다 SASS를 사용하면 많은 이점이 있습니다.

• Variables - Sass를 사용하면 CSS 코드를 단순화하고 복잡성을 줄일 수 있는 변수를 만들 수 있습니다. 예를 들어, backgroundColor 변수를 정의하고 여기에 적절한 값을 할당할 수 있습니다. 그 후에는 하드 코딩된 색상 값 대신 코드 전체에서 변수를 사용할 수 있습니다.

• Mixins - Sass를 사용하면 코드의 다른 부분에서 사용할 수 있는 함수와 마찬가지로 재사용 가능한 코드 덩어리인 믹스인을 정의할 수 있습니다.

• Nesting - Sass를 사용하면 CSS 선택자를 중첩하여 코드를 더 체계적이고 읽기 쉽게 만들 수 있습니다. 예를 들어 탐색 선택기 내에 ul 선택기를 중첩하여 탐색 메뉴 스타일을 지정할 수 있습니다.

• Import- SASS에서 부분 SCSS 파일을 생성하고 이를 다른 SCSS 파일로 가져와서 다양한 구성 요소에 대한 코드를 별도의 파일로 나눌 수 있습니다.

위 내용은 명령줄에서 SASS 코드를 실행하는 데 사용되는 명령은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!