CSS 전처리기를 사용하는 방법

CSS에서 코드 충돌이 발생하여 변수, 산술 계산 등이 수행되지 않는 경우가 있습니다. CSS 전처리기를 사용하면 근접변수, 4규칙 계산 등의 프로그램을 작성할 수 있습니다. 따라서 다음 글에서는 CSS 전처리기를 사용하는 방법을 알려드리겠습니다.

먼저 살펴보겠습니다CSS 전처리기란 무엇인가요? ㅋㅋㅋ                                                                                    지금까지 구현이 불가능했던 기본 CSS를 설명하려면 CSS 전처리기가 CSS를 효율적으로 설명하기 위한 것입니다.

단, CSS 전처리기는 브라우저에서 사용할 수 없습니다.

다양한 Sass와 Less가 있지만 아직까지는 CSS로 설명하기 어려운 것 같지만 이를 "새로운 CSS 확장 버전"이라고 합니다.

주요 전처리기 유형

Sass

Sass는 변수와 수식을 사용하여 CSS 프로그래밍 스타일에 추가하는 확장자 ".scss"를 사용하여 scsss로 변환된 CSS 파일입니다.

"style.scss"의 Sass 파일을 변환(컴파일)하여 "style.css"를 생성할 수 있습니다.

이용하려면 Ruby를 설치해야 합니다.

LESS

LESS는 Sass와 같은 LESS 파일을 변환(컴파일)합니다.

변수의 개념이 적을 수 있으므로 계산하거나 계층적으로 작성할 수 있습니다.

단, "style.less"를 사용하기 위해 node.js를 설치하지 않으면 "style.css"가 변환되지 않습니다.

구체적인 예를 살펴보겠습니다

LESS 작성 방법

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

LESS

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

브라우저 표시 효과는 다음과 같습니다.

HTMLrrre 에

style.css file

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

이 경우 색상을 모두 바꾸고 싶다면 2h1h2를 바꾸고 싶다면 변수를 이용해서 아래와 같이 기술하면 됩니다.

h1 {
    font-size: 30px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

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