color-mod-function / system-ui / nesting rules / css grid kiss

color-mod

CSS에서 하나하나 색깔값 주기보다는 불투명도 살짝 조절해서 색깔 변동하고 싶다면?

color-mod-function!

 

개발환경 준비

1. 설치

npm i postcss-color-mod-function

 

2. package.json 수정

"postcss": {

    "plugins": {

      "postcss-preset-env": {

        "stage": 0

      },

      "postcss-color-mod-function": {}

    }

 

color-mod

텍스트의 색깔 및 투명도 조절. 

CSS4 준비 과정에서 deprecated 되어서, 따로 설치해줘야함 유의

 

h1 {

  color: color-mod(#0984e3);

}

 

h1:hover {

  color: color-mod(#0984e3 alpha(10%));

}

 

gray

h1 {

  color: color-mod(#0984e3);

}

 

h1:hover {

  color: gray(50);

}

 

system-ui

system-ui

body {

  font-family: "Courier New", Courier, monospace;

}

h1 {

  color: color-mod(#0984e3);

}

 

h1:hover {

  font-family: system-ui;

}

 

nesting rules

nesting rules

h1 {

  & li {

    background-color: yellow;

    width: 400px;

  }

}

 

결과 : h1과 li 모두 yellow, 400px 적용

 

****CSS에서는 selection이 자세할 수록 우위를 가진다. 

아래의 코드에서 a가 red로 지정되지 않는 이유!

 

main {
  background-color: blue;
  & section {
    background-color: red;
    width: 500px;
    & li {
      background-color: yellow;
      width: 400px;
      & a {
        color: black;
        &:hover {
          font-size: 30px;
        }
      }
    }
  }
}

a {
  color: red;
}

 

css-grid-kiss

++ --의 기호로 그리면 자동으로 css 만들어준다. 

편하다고 생각하는 사람들도 있는데, 내 개인적인 생각으로는 상당히 노가다가 아닐까 한다..ㅇㅅㅇ

당분간은 쓸 예정 없으나, 멋진 아이디어인건 인정! 어떤 경우에서 쓰는지 나중에 알아봐야겠다.