03 - CSS Variables (Javascript 30)

원문 코드는 아래로 들어가시면 있습니다.

필요하신분들은 클론해서 쓰시면 됩니다.

출처 : https://github.com/wesbos/JavaScript30/tree/master/03%20-%20CSS%20Variables

wesbos/JavaScript30

Javascript30의 세 번째 프로젝트는 css 변수입니다.

 

css에서 변수를 사용할 수 있는데 사용법은 간단합니다.

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

style 안에 이렇게 정의해주면 --base, --spacing, --blur라는 css 변수가 선언과 동시에 초기화가 된것입니다.

사용법도 간단합니다.

 

아래와 같이 var(--spacing) 이런식으로 사용하면됩니다.

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

이렇게하면 css쪽 준비는 끝이 났습니다.

이대로 브라우저로 열어서 보면 값이 적용된 것을 볼 수 있습니다.

 

이제 js 코드를 작성해보겠습니다.

 

코드를 아래와 같이 작성하면 이제 마우스로 input 박스에 마우스로 움직이거나 클릭하면 변수의 값이 변경되고 실제로 화면이 변경되는 모습을 볼 수 있습니다.

let inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  let suffix = this.dataset.sizing || '';
  // document.documentElement는 최상위인 html 태그에 대한 읽기속성이다.
  // 변수를 html 태그에 style 요소로 설정한다.
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));