CSS Variable

Creator

Creator

Seonglae Cho

Created

Created

2021 May 20 9:39

Editor

Editor

Seonglae Cho

Edited

Edited

2024 Jul 15 16:44

Refs

Refs

--


:root {
  --main-bg-color: brown;
}


element {
 --main-bg-color: brown;
  background-color: var(--main-bg-color);
}

CSS @property

@property: Next-gen CSS variables now with universal browser support | Blog | web.dev

Semantic custom properties with @property just reached Baseline newly available.

@property: Next-gen CSS variables now with universal browser support | Blog | web.dev

https://web.dev/blog/at-property-baseline

@property: Next-gen CSS variables now with universal browser support | Blog | web.dev

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

사용자 지정 속성( CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) 함수를 사용해 접근할 수 있습니다. ( color: var(--main-color);) 복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용합니다.

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

CSS @apply

What is @apply in CSS?

the simple way of explaining it would be; introducing variables into css (which is a feature of preprocessors such as sass), and mixins which are function like behaviors (also in preprocessors).

https://stackoverflow.com/questions/41067550/what-is-apply-in-css

CSS Shadow part

CSS Shadow Parts

Specification Metadata This specification defines the ::part() pseudo-element on shadow hosts, allowing shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

CSS Shadow Parts

https://drafts.csswg.org/css-shadow-parts/

Backlinks

CSS History CSS

Recommendations

////////