[CSS] CSS Variable --

https://developer.mozilla.org/en-US/docs/Web/CSS/--* 

 

홈페이지 만들면서 겹치는 css style속성들을 하드코딩하지 말고 상수로 잘 정의해주도록 하자!

또한 css 변수명은 카멜케이스로 쓰기 않고 데시 (-)로 단어들을 연결한다.

 

ex) redBar (x)

ex) red-bar (O)

 

자주 쓰는 font-middle-size를 32px로 하여 이걸 상수화 시켜서 필요할 때 마다 가져다 쓰고 싶다고 가정하자,

그려면 var 이라는 css에서 제공해주는 함수를 이용해야 한다.

 

.red-viewer {

  --font-size : 32px;

  font-size : var(--font-size);

}

.red-viewer {

  --font-size : 32px;

  font-size : var(--font-size);

}

또한..

.red-viewer {

  --font-size : 32px; //부모에 있는 변수 정의는 자식이 받아 쓸 수 있다! (단, 형제간은 안됨)

}

 

.red-viewer li {

  font-size : var(--font-size);

}

 

하지만 css의 상수들은 위와 같이 지역적으로 쓰지 않고 최상 root에 정의해둔다.

:root {

  --font-size : 32px;
  --background-color : thistle;
  --base-space : 8px;

}

컬러 위주로 많이 활용하게 된다. 이렇게 했을 때의 장점은 최상단 루트에서 css 상수값을 바꿔주면 되니까 마우스휠 왔다갔다 + 키보드 계속 두드려줄 필요가 없다는 것!

 

calc은 css가 제공하는 함수로, var() 함수 등을 가지고 연산이 가능해서 쉽고 편리하다! :)

화면이 작아질 때 상수 값을 바꿔주고 싶다면 미디어 쿼리에다가

다른 상수 값을 복붙해서 넣어주면 와따가 된다.

 

 

Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

예제

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

calc() - CSS: Cascading Style Sheets | MDN

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}