scss @use

2023. 1. 28.·🎨 프론트엔드 공부/HTML & CSS

📍참고

https://sass-lang.com/documentation/at-rules/use

 

Sass: @use

Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead. The @use rule loads mixins, functions, and variables from other Sass stylesheets, and

sass-lang.com

 

📍@use 란?

- 다른 .scss 파일에서 mixin, function, variables 를 import 한다

- 다수의 .scss 파일(모듈)을 모아 합쳐준다

- 오래된 @import 문법을 대체

 

📍모듈 .scss 파일

- 컴파일하지 않을 것이라는 의미로 파일명 앞에 _ 를 붙여준다

- 예) _reset.scss

 

📍namespace 활용

- @use를 통해 네임스페이스를 활용할 수 있다

- 이는 @import의 문제를 해결해준다

- 예) stlye.scss에서 _corners.scss 모듈을 import 해와서 namespace c로 활용

 

📍변수명 앞에 - 를 붙이면 private member로 활용 가능

- 그러면, 정의된 모듈에서만 활용 가능하다

- 예)

'🎨 프론트엔드 공부/HTML & CSS' 카테고리의 다른 글
  • [CSS Battle] 1-9. Tesseract
  • Entity code 정리
  • [CSS Battle - 8] 1-8. Forking Crazy
  • [HTML] Input & datalist element
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516)
      • 🎨 프론트엔드 공부 (253)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
scss @use
상단으로

티스토리툴바