[CSS] Variables

변수(Variables)

sass

• $ 사용
• 자바스크립트를 이용한 동적 변경 불가능
• 변수를 밑에서 한번 더 선언한다면 선언된 변수 밑의 클래스들만 적용

css custom properties

• -- 사용
• 자바스크립트를 이용한 동적 변경 가능
• 변수를 밑에서 한번 더 선언한다면 가장 밑에 선언한 변수값으로 할당
  -> 전역 변수정의는 위쪽에서 해주는게 좋다.

전역 변수 정의

:root {
	--blue: #00f;
	--primary-color: var(--blue);
}

지역 변수 정의

(--green 속성이 없을 때 대안으로 #fff가 적용되도록 설정 > 폴백)

.text-card-1 {
	color: var(--green, #fff);
}

지역 사용

지역 변수를 선언할 때 전역 변수 값을 할당할 수 있다

.container{
	--text-color: var(--green);
}

부모의 값 상속

• 부모 요소에서 --text-color을 재정의 했기 때문에 부모 값인 blue를 상속받음

.container{
	color: var(--text-color);
    
    .parent {
    	--text-color: blue;
       	
        .child {
        	color: var(--text-color);
		}
	}
}

• 전역에 선언한 변수가 지역에서 또 선언되면 지역에 선언된 변수로 할당
  -> 전역보다 지역이 우선

@property

규칙 선언

@property --text-color {
	syntax: '<color>'; 
	inherits: false;
	initial-value: orange;
}

-> color의 기본값을 orange로 주고, inherits(상속)을 받지 않는다