Sass에서 클래스를 다른 파일로 상속

SASS는 CSS 코드를 더 잘 조작하기 위해 CSS 위에 구축된 전처리기입니다. 여기에는 CSS 코드 작성을 쉽게 해주는 여러 지시문과 규칙이 포함되어 있습니다. 또한 상속, if/else 문, 함수 등과 같은 매우 유용한 기능도 포함되어 있습니다.

SASS에서는 한 파일을 다른 파일로 가져오고 한 파일의 내용을 다른 파일에서 사용할 수 있습니다. 또한 여러 클래스 간에 상속을 생성할 수도 있습니다. @extend 지시문을 사용하여 한 클래스를 다른 클래스로 상속할 수 있습니다. CSS에서 상속을 사용하면 코드의 재사용성을 향상시킬 수 있습니다.

이 튜토리얼에서는 SASS의 다른 파일에서 클래스를 상속하는 방법을 배웁니다.

문법

사용자는 아래 구문을 따라 SASS의 다른 파일에 클래스를 상속할 수 있습니다.

위 구문에서 @import 규칙을 사용하여 파일을 가져왔습니다. 그런 다음 @extend 지시문을 사용하여 "classname" 클래스로 "element" 클래스를 확장합니다.

예제 1(기본 클래스 상속)

아래 예에서는 기본 클래스 상속을 보여줍니다. 여기의 card.scss 파일에 일부 CSS 속성이 있는 'card' 클래스를 추가했습니다. 카드를 만드는 데 필요한 모든 기본 CSS 속성과 값이 포함되어 있다고 말할 수 있습니다.

style.scss 파일에서 @import 지시문을 사용하여 card.scss 파일을 가져옵니다. 그 후 'card-div' 및 'card-container' 클래스의 스타일을 지정했습니다. 동시에 'card-div' 및 'card-container' 클래스를 'card' 클래스로 상속하기 위해 @extend 규칙을 사용했습니다.

출력에서 상속된 클래스의 결과를 관찰할 수 있습니다. 또한 사용자는 아래 예에서 코드 재사용성을 관찰할 수 있습니다.

파일 이름 -card.scss

파일 이름 – style.scss

출력

예제 2(여러 클래스 상속)

아래 예에서는 여러 클래스의 상속을 보여줍니다. “specs.scss” 파일에 CSS 속성을 포함하는 다양한 클래스를 추가했습니다. style.scss 파일에서 "specs.scss" 파일을 가져왔습니다. 또한 @extend 지시문을 사용하여 "specs.scss" 파일의 3개 클래스를 모두 "div" 클래스로 확장했습니다. 그래서 우리는 여러 클래스를 다른 파일에서 하나의 클래스로 상속했습니다.

파일 이름 - specs.scss

파일 이름 – style.scss

출력

예제 3(중첩 상속)

아래 예에서는 중첩 상속을 보여줍니다. form.scss 파일에서 두 개의 서로 다른 클래스를 만들고 CSS 속성을 추가했습니다.

style.scss 파일에는 'form-field' 클래스를 통해 'form-group' 클래스를 상속하고 'form-input' 클래스를 추가했습니다. 'input-field' 클래스는 'form-input' 클래스를 상속합니다. 그래서 우리는 중첩된 상속 클래스를 사용했습니다.

파일 이름 - form.scss

파일 이름 – style.scss

출력

사용자는 SASS에서 한 파일에서 다른 파일로 클래스를 상속하는 방법을 배웠습니다. 사용자는 클래스가 포함된 파일을 가져와서 @extend 지시문 클래스 이름을 사용하여 한 클래스에서 다른 클래스로 상속해야 합니다.

위 내용은 Sass에서 클래스를 다른 파일로 상속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!