css 변수3 다크모드를 위해서 Context API보다 CSS 변수를 활용하세요 다크모드를 관리할 때 일반적으로 Context API를 통해서 전체 테마를 바꾸는 ThemeProvider 기법을 많이 사용하게 됩니다. 여전히 CSS-in-JS는 최근 몇 년동안 CSS 사양이 많이 발전하고 개선되고, 최신 브라우저들도 발전함에 따라(Internet explorer의 변명은 더 이상 충분치 않습니다.) ThemeProvider를 사용하지만 많은 사용 사례에서 많은 이점만 있는 것이 아니라는 것을 깨닫게 됩니다. 이모션을 사용한 ThemeProvider의 예시를 살펴보시죠. import * as React from "react"; import styled from "@emotion/styled"; import { ThemeProvider } from "emotion-theming"; co.. 2022. 10. 30. css variables? css 변수 사용하기 css variables 사용에 대해서 어떻게 생각하시나요? 오랫동안 요청되었지만 여전히 많이 사용되지 않는 계단식 변수에 대한 CSS 맞춤 속성은 협업 및 코드 재사용을위한 혁신적인 가능성을 제공합니다. 그러나 오늘날 CSS 변수는 제대로 이해되지 않고 있습니다. 이 글을 읽은 후 선언적 CSS 변수와 다른 프로그래밍 언어의 변수 간의 차이점과 그 기능을 활용하는 방법을 더 잘 이해하기를 바랍니다. CSS 변수는 계단식으로 연결되고 상속되는 사용자 지정 속성입니다. -접두사로 시작하며 값에 대한 실제 규칙이 없습니다. 선언시 느슨하게 구문 분석되지만 사용자 지정이 아닌 속성에서 사용될 때까지 오류 처리가 수행되지 않습니다. 해당 값은 모든 CSS 속성에서 사용할 수있는 var (-name) 함수를 통해.. 2021. 1. 11. 사용자 정의 속성 사용 custom properties (Global CSS ) css를 통한 커스텀 속성 변수 사용은 ie11은 폴리필로 지원하고 있습니다. ie가 타락하고 있는 이 시점에 상기시켜두면 좋지 않을까 싶어서 포스팅 합니다. 프로젝트의 전역 설정에 사용자 정의 속성 (CSS 변수라고도 함)을 사용하는 방법에 대한 몇 가지가 있습니다. Sass를 사용하면 매우 쉽습니다. // Global option $enable-shadows: false; // Mixin that consumes the shadow @mixin box-shadow($shadow...) { @if $enable-shadows { box-shadow: $shadow; } } // Put it to use .component { @include box-shadow(0 .5rem 1rem rgba(0,0,0.. 2020. 9. 21. 이전 1 다음
