CSS 확장 / Sass에만 존재하는 기능이 CSS에 통합 되다 !

 

 

---

개요

스타일 개발을 효율적으로 할 수 있게 지원해주는 기능이 많다는 것은 많은 사람들이 Sass를 사용하게 만들었습니다. 하지만 여전히 Sass를 설치하고 컴파일하는 과정이 존재한다는 것은 대체 가능한 도구를 찾게 되는 이유 중 하나입니다.

 

 

아직까지 Sass 고유 기능

• rem으로 변환하는 함수와 믹스인(Mixins)
• 반복문

 

 

CSS 확장 기능

1. 변수 지정

CSS에서도 Sass와 유사한 방식으로 변수를 정의할 수 있습니다. 중요한 차이점은 Sass 변수는 전처리기 컨텍스트 내에서만 존재하지만, CSS 변수는 브라우저에서 사용될 수 있으며 자바스크립트를 통해 동적으로 덮어쓸 수도 있다는 점이 다르다.

:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

.button {
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

 

 

2. CSS 중첩

하나의 요소 안에서 다른 요소의 스타일 규칙을 정의할 수 있는 기능입니다. 동일한 선택자를 반복적으로 사용하는 대신, 중첩을 통해 이를 상위 선택자 내에서 그룹화할 수 있습니다. 이 기술은 코드베이스를 명확하고 계층적으로 구조화하며, 더 효율적으로 만들어줍니다.

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

  .blog-item {
    border: 1px solid var(--neutral-200);

    & span {
      font-size: 1rem;
    }
  }
}

 

 

3. 선택자

:is() 의사 클래스

여러 선택자 리스트를 받아 이들 중 하나라도 일치하는 모든 요소를 스타일링 할 수 있도록 합니다.

:is(selector1, selector2, selector3) {
  /* styles */
}

 

 

4. 하위 선택자

:has() 의사 클래스

하위 요소를 기준으로 요소를 선택하는 기능입니다.

.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

 

 

5. 컨테이너 쿼리

컨테이너 쿼리는 CSS3 이후 웹 디자인에서 가장 중요한 혁신으로 평가받고 있습니다. 이는 반응형 디자인의 개념을 확장하여 요소가 컨테이너의 크기에 따라 조정될 수 있도록 합니다. 이러한 기술은 요소의 디자인이 컨텍스트에 따라 동적으로 변경될 수 있도록 하여 더욱 유연하고 적응력 있는 디자인을 가능하게 합니다.

컨테이너 fancy가 변수 —theme: dark를 가지고 있다면, 위의 CSS를 추가합니다.

.component {
  --theme: dark;
  container-name: fancy;
}

@container fancy style(--theme: dark) {
  .fancy {
    /* dark styles. */
  }
}

.parent-container {
  container-type: inline-size;

  .headline {
    font-size: 2rem;
  }

  @container (width >= 720px) {
    .headline {
      font-size: 2.5rem;
    }
  }
}

 

 

6. 캐스케이드 레이어(Cascade layers)

캐스케이드 레이어를 사용하면 클래스나 ID 등을 중첩할 필요 없이 자체 계층(레이어)을 할당해 더 높은 우선순위(specificity)를 확보할 수 있습니다. @layer 규칙과 계층화된 @import를 사용해 리셋 및 기본값과 같은 낮은 우선순위 스타일에서 테마, 프레임워크, 디자인 시스템을 거쳐 컴포넌트, 유틸리티, 오버라이드와 같은 높은 우선순위 스타일까지 자체 캐스케이드 레이어를 구축할 수 있습니다. 이를 통해 더 나은 제어가 가능합니다.

@layer utilities {
  b .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}

 

 

 

 

https://ykss.netlify.app/translation/goodbye_sass_welcome_back_native_css/?utm_source=substack&utm_medium=email

(번역) 잘 가 SASS 👋, 다시 만나 반가워 네이티브 CSS