SASS 부분 분석 가져오기
부분을 사용하면 CSS를 모듈화하여 유지 관리할 수 있습니다.
우리는 Sass를 서로 다른 구성 요소를 나타내는 별도의 파일로 나눕니다. 부분 이름은 항상 밑줄(_)로 시작합니다. 그런 다음
@import
지시문을 사용하여 부분을 가져옵니다.부분 사용
Sass 파일이 점점 커지고 있다고 가정해 보겠습니다. 헤더 섹션과 관련된 코드만 포함하는 부분 파일을 만들도록 선택할 수 있습니다. 우리는 그것을
_header.scss
라고 부르고 적절한 코드를 새 파일로 옮길 것입니다.그런 다음 다음과 같이
main.css
로 다시 가져옵니다.// In main.scss
@import 'header';
참고: 파일을 가져올 때 _ 또는 .scss 파일 확장자를 포함할 필요가 없습니다.
CSS 대 SASS의 @import
@import
지시문은 물론 CSS에서도 사용할 수 있습니다. 그러나 중요한 차이점이 있습니다. CSS에서 import 문을 사용할 때마다 서버에 HTTP 요청이 이루어집니다. 이것은 리소스 요청의 양을 증가시키고 웹 페이지의 성능에 부정적인 영향을 미칩니다. SASS는 그렇게 하지 않습니다. SASS는 가져오려는 파일을 가져와 가져오는 파일과 결합합니다. 따라서 성능에 영향을 미치지 않는 단일 CSS 파일을 웹 브라우저에 제공할 수 있습니다.이 시리즈의 다음 게시물에서는
extends
를 사용하여 상속을 구현하는 방법을 살펴보겠습니다.결론
이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here
🌎 연결하자
Reference
이 문제에 관하여(SASS 부분 분석 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rembertdesigns/importing-sass-partials-breakdown-3cfe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)