CSS 전처리기가 필요하지 않습니다.

네이티브 CSS는 최근 몇 달/몇 년 동안 많은 발전을 이루었습니다. 이 게시물에서는 사람들이 SASS, LESS 및 Stylus와 같은 CSS 전처리기를 사용하는 주요 이유를 살펴보고 기본 CSS를 사용하여 동일한 작업을 수행할 수 있는 방법을 보여 드리겠습니다.

파일 분리

파일 분리는 사람들이 전처리기를 찾는 주요 이유 중 하나입니다. 꽤 오랫동안 다른 파일을 CSS 파일로 가져올 수 있었습니다. 이런 모습입니다.

@import url("./utils.css");

앵커 태그나 다른 리소스의 href에 사용하는 것과 같은 방식으로 상대 경로나 절대 경로를 사용할 수 있습니다.

전처리기와의 주요 차이점은 전처리기가 컴파일 시 결합하는 반면 CSS는 런타임에 http 요청을 한다는 것입니다.

중첩 규칙

이것이 전처리기를 사용하는 주된 이유입니다. 적어도 그것이 제가 과거에 이 제품을 사용했던 주된 이유입니다.

그러나 이제 CSS는 중첩을 지원하며 주로 전처리기 사용에 익숙한 방식으로 작동합니다.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

정말 대단합니다. 수십 년 동안 CSS를 작성하면 정말 큰 이점이 됩니다.

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Sudo 선택기

Sudo 선택기는 전처리기에서도 익숙할 수 있는 네이티브 CSS에서도 동일한 방식으로 작동합니다.

button {
  color: blue;

  &:hover {
    color: purple;
  }
}

MDN에서 중첩에 대한 자세한 내용을 읽을 수 있습니다.

변수

전처리기를 사용하는 오랜 이유는 변수였습니다. 하나의 파일에 모든 색상, 간격 등을 포함하고 어디에서나 전역적으로 업데이트할 수 있습니다.

이제 당분간은 기본 CSS에서 그렇게 할 수 있습니다. 실제로 여러 면에서 전처리기보다 낫습니다.

전역 변수

전역 변수는 :root 규칙으로 묶입니다. 어디에서나 참고할 수 있습니다.

:root {
  --bg-color: #333;
}

변수를 사용하려면 var 태그로 참조해야 합니다

button {
  background-color: var(--bg-color);
}

범위 변수

선택기에서 변수 범위를 지정할 수도 있습니다. 예를 들어...

header {
  --bg-color: #999;
}

따라서 이 경우에는 var(--bg-color); 헤더 선택기 내에서 결과는 #999;

입니다.

런타임 시 값 재할당

따라서 전처리기에 비해 CSS 변수의 가장 큰 장점은 런타임에 재정의될 수 있다는 것입니다. 전처리기는 일단 컴파일되면 영구적입니다.

예를 들어 밝은 모드와 어두운 모드를 지원하려는 웹사이트가 있다고 가정해 보겠습니다. 이는 CSS 변수를 사용하여 매우 쉽게 달성할 수 있습니다.

:root {
  --bg-color: white;
}

body {
  background-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}

전처리기로 이와 같은 작업을 수행하려면 Javascript를 사용하여 본문에서 클래스를 전환하고 .dark 클래스 또는 이와 유사한 클래스로 모든 규칙을 재정의해야 합니다.

계산

LESS, Stylus, SASS 등 대부분의 전처리기를 사용하면 계산을 수행할 수 있습니다. 변수를 반으로 나누고 싶은 경우와 같습니다.

calc 함수를 사용하여 기본 CSS에서 이를 수행할 수 있습니다.

@import url("./utils.css");

정말 멋지죠?

색상 변형

또 다른 인기 기능(적어도 나에게는)은 CSS 전처리기에서 색상을 밝게 하고 어둡게 하는 것입니다. 이제 color-mix를 사용하여 기본 CSS에서도 이 작업을 수행할 수 있습니다.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

위의 내용은 전처리기에서 밝기(빨간색, 50%)를 사용하여 수행하는 작업과 동일합니다.

어둡게 하려면 흰색 대신 검정색을 섞으세요

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

다음번에 프로젝트에 사용할 도구를 선택할 때 기본 CSS를 사용해 보시길 바랍니다. 먼 길을 왔습니다.

위 내용은 CSS 전처리기가 필요하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!