SASS에서 파일 분할

SASS는 Syntactically Awesome Style Sheet를 의미하는 CSS 전처리기입니다. SASS 코드는 JavaScript와 같은 스크립트 언어처럼 작성되지만 컴파일 시 CSS로 변환되어 컴파일됩니다. SASS는 브라우저의 CSS와 마찬가지로 모든 버전의 CSS에서 사용할 수 있으며 일반 CSS에서 코드를 작성하는 방법을 향상시키는 데 사용됩니다.

일반적인 작업 공간에서는 전체 코드를 별도의 파일에 작성하는 데 익숙하기 때문에 다른 개발자가 코드를 읽고 이해하기 어렵습니다. SASS를 사용하면 파일을 분할하고 코드를 여러 파일로 분리할 수 있습니다.

파일을 분할하는 과정에는 하나의 큰 파일을 여러 개의 하위 파일로 나눈 다음 서로 연결하는 작업이 포함됩니다. 이는 SASS에서 아래 방법을 사용하여 쉽게 수행할 수 있습니다 −

• @import 및 부분 사용

• @use 및 부분 사용

이제 SASS에서 단일 파일의 여러 하위 파일을 연결하는 코드 예제를 통해 위 방법을 자세히 이해해 보겠습니다.

@import 및 부분 파일 사용

이 방법에서는 일반적으로 CSS 파일에 작성하는 스타일을 작성합니다. 그러나 다른 모든 파일을 함께 포함하거나 연결하고 모든 코드를 가져오기 위한 @import 문이 포함된 공통 파일이 있습니다. 그 파일에 있는 그 파일들

모든 하위 파일이 공통 파일에 연결되거나 포함된 후에는 모든 SASS 파일이 존재하는 동일한 폴더에서 아래 명령을 실행해야 합니다 −

으아아아

위 명령은 페이지 스타일을 지정하기 위해 HTML 문서에 연결될 최종 출력 파일에 일반 SASS 파일의 전체 코드를 연결하거나 포함합니다.

위 메서드가 어떻게 구현되는지 코드 예시를 통해 자세히 살펴보겠습니다-

단계

• 1단계 − 이 단계에서는 확장자가 .scss인 SASS 파일을 여러 개 생성합니다

• 2단계 - 이제 이전 단계에서 생성된 모든 SASS 파일에 대한 @import 문이 포함된 SASS 파일을 생성하겠습니다.

• 3단계 - 마지막 단계에서는 위 명령을 사용하여 공용 파일을 최종 CSS 파일에 포함하거나 링크한 다음 HTML 문서와 링크합니다.

Explanation

의 중국어 번역은

Explanation

입니다.

• 파일 1 − test.scss라는 파일을 만들고 해당 파일 안에 SASS 코드를 넣어 보겠습니다.

test.css −

으아아아

• 파일 2 − 이제 common.scss라는 파일을 만듭니다. 이 파일은 @import 문을 사용하여 모든 하위 파일을 연결합니다.

common.scss −

으아아아

• 파일 3 − 이것은 모든 SASS 코드를 포함하고 HTML 문서에 연결되는 최종 파일인 final.css가 됩니다.

아래 명령을 실행하세요 −

으아아아

final.css −

으아아아

이제 final.css 파일을 HTML 문서와 연결하여 아래 예와 같이 모든 SASS 파일의 CSS로 페이지 스타일을 지정할 수 있습니다.

예

아래 예에서는 여러 SASS 파일을 생성 및 연결하고 페이지 스타일을 지정하는 방법을 보여줍니다 −

으아아아

위 예에서는 최종 final.css 파일을 사용하여 SASS 파일의 모든 스타일로 문서 스타일을 지정했습니다.

NOTE - 위의 코드 예제를 구현하려면 SASS가 시스템에 사전 설치되어 있는지 확인하세요.

@use 및 부분 파일 사용

@use 방법을 사용하여 스타일을 삽입하는 것은 @import 방법과 거의 유사합니다. 파일 이름 앞에 밑줄을 붙이고 @use 문을 사용하여 가져오기만 하면 됩니다. 이를 통해 SASS 파일에 정의된 함수 및 믹스인에 액세스할 수도 있습니다.

Explanation

의 중국어 번역은

Explanation

입니다.

• 파일 1 − 파일 1은 밑줄을 접두어로 정의한 함수, 믹스인 및 간단한 CSS 스타일을 포함하는 SASS 파일입니다.

_test.scss −

으아아아

• 파일 2 − @use 문을 사용하여 모든 SASS 파일을 함께 연결하는 공통 파일입니다.

common.scss −

으아아아

• 파일 3 − 이 파일은 최종 CSS 파일이며 모든 SASS 파일의 모든 스타일의 최종 버전입니다.

아래 명령을 실행하세요 −

으아아아

final.css −

으아아아

이 방법으로 파일을 분할하여 SASS를 구현하고 최종 출력 CSS 파일로 HTML 문서에 스타일을 추가할 수 있습니다.

이 기사에서는 분할된 SASS 파일을 별도의 파일에 연결하거나 포함하고 최종 CSS 파일을 사용하여 HTML 페이지에 스타일을 추가하는 두 가지 방법을 배웠습니다.

위 내용은 SASS에서 파일 분할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!