Milligram: 하이라이트 색상을 쉽게 변경(#9b4dca)

에 만든 2018년 02월 22일 · 6코멘트 · 출처: milligram/milligram

CSS3 변수(사용자 정의 속성)를 사용하면 CSS의 한 줄에서 강조 표시 색상을 재정의할 수 있습니다.

milligram.css에는 다음과 같은 내용이 있습니다.

:root {
  --highlight-color: #9b4dca;
}

그런 다음 모든 #9b4dca 을 var(--highlight-color) 로 바꿉니다.

이 작업이 완료되면 강조 표시 색상을 다음과 같이 custom.css 파일을 포함하는 것만큼 쉽게 교체할 수 있습니다.

:root {
  --highlight-color: #abcabc;
}

Hacktoberfest new feature

출처

mterron

👍10 ❤3

가장 유용한 댓글

나는 같은 일을 위해 여기에 왔습니다 ^^ 하지만 SASS로 작성되었으며 이전 브라우저를 지원하고 싶을 수도 있으므로 다음과 같이 더 많은 대체 검증된 예를 수행하는 것이 좋습니다.

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

이런 식으로 CSS 사용자 정의 속성을 지원하지 않는 브라우저는 여전히 작동하는 버전으로 대체됩니다. 또한 이렇게 하면 var() 가 이미 대체 옵션을 제공하므로 실제 스타일시트에 :root {} 가 필요하지 않습니다.

건배,
도미니크

dkundel 에 2018년 03월 23일

👍6

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

건배,
도미니크

dkundel 에 2018년 03월 23일

👍6

현재까지 진행 상황이나 수행된 작업이 있습니까? 😄

timrossback 에 2019년 06월 29일

현재까지 진행 상황이나 수행된 작업이 있습니까? 😄

항상 src/_Color.sass 에서 색상 값을 변경한 다음 sass --update 로 다시 컴파일할 수 있습니다. 자신의 sass 파일을 추가할 수도 있습니다.

dntzbgh 에 2019년 06월 29일

현재까지 진행 상황이나 수행된 작업이 있습니까? 😄
항상 src/_Color.sass 에서 색상 값을 변경한 다음 sass --update 로 다시 컴파일할 수 있습니다. 자신의 sass 파일을 추가할 수도 있습니다.

좋은 지적! Sass를 사용하지 않기 때문에 좀 더 기본 제공되는 솔루션을 찾고 있는 것 같지만 /dist/milligram.min.css 에서 값 자체를 변경하는 것 외에 어떻게 하면 쉽게 할 수 있는지 모르겠습니다.

timrossback 에 2019년 06월 30일

👍1

이 프레임워크를 좋아하세요! 이 기능이 출시될 때까지 기다릴 수 없습니다 🚀

cilim 에 2020년 08월 26일

Hey @mterron @dkundel @timrossback @dntzbgh @cilim

cjpatoilo 에 2020년 08월 27일

👍2

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급