07/27(수) ☀️ SCSS

🔥 SCSS

🌟 @use:map

• 맵 안의 메소드를 사용하기 위해 use로 가져오기
• has-key(map, key) -> 불리언 반환
• get(map, key) -> key의 value값 반환

🌟 미디어쿼리 병합

• 선택자 밖에 미디어쿼리를 작성하는 것이 아닌 내부에 가져와
  해당 요소 안에서 미디어쿼리를 작성하고 postcss의 미디어쿼리 병합 플러그인으로
  병합 시 유지보수가 수월하다.

🌟 mixin

• 너무 많이 의존하지 않고 정말 필요한 것들만 만드는 것이 사용에 용이하다.

🌟 @import

• 임포트는 use보다 먼저 올 수 없다.

🌟 요소 선택

• 구체성 문제를 염두하고 사용해야 한다.

🌟 rgba 함수

• rgba(#aaaaaa, 투명도) 와 같이 16진수 값도 사용 가능하다.

🌟 박스 사이즈 뷰포트 크기로 채우기

@mixin boxSizeFull {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: initial;
}

🌟 @at-root

• 중첩 블록를 벗어나게 해주는 방법

🌟 뷰포트 단위 글자 크기

• clamp 함수를 이용해 반응형 텍스트 크기 만들 수 있다.

🌟 :focus-visible, :focus-within (CSS)

• :focus-visible 키보드로만 포커싱 디자인이 보인다.

🌟 aria-modal

• 스크린 리더가 모달 영역 내의 콘텐츠만 탐색하게 된다.

  ---