LESS에서 작업의 용도는 무엇입니까?

LESS(Less-Based Style Sheets)는 CSS(Cascading Style Sheets)를 추가 기능으로 확장하는 동적 스타일 시트 언어입니다. CSS 값에 대한 수학적 계산을 수행하는 다양한 작업을 제공하므로 개발자는 더욱 유연하고 동적인 스타일을 만들 수 있습니다.

이 튜토리얼에서는 LESS에서 이러한 작업을 수행하는 방법과 다양한 화면 크기 및 장치에 적합한 스타일을 만드는 방법을 설명합니다.

LESS의 다양한 작업

다음은 LESS에서 사용할 수 있는 몇 가지 작업입니다 -

더하기(+) 및 빼기(-) − 이러한 연산을 통해 서로 값을 더하거나 뺄 수 있습니다.

곱하기(*) 및 나누기(/) − 이러한 연산을 사용하면 값을 곱하거나 나눌 수 있습니다.

Calc() 예외

CSS의 calc() 함수를 사용하면 CSS에서 사용할 수 있는 값에 대해 수학 연산을 수행할 수 있습니다. 이 기능은 다른 값을 기반으로 요소의 너비나 높이를 계산하는 데 사용할 수 있으며, 이는 반응형 디자인에 매우 유용합니다.

주의해야 할 중요한 점은 calc()는 기본적으로 수학적 표현식을 평가하지 않는다는 것입니다. 이는 일부 브라우저가 특정 수학 기능을 지원하지 않을 수 있으므로 CSS 호환성 이유로 수행됩니다. 그러나 calc()는 중첩된 함수 내에서 변수와 수학을 계산하므로 사용자가 더 복잡한 계산을 수행할 수 있습니다.

예를 들어 @width라는 변수가 있다고 가정해 보겠습니다. calc() 함수에서 이 변수를 사용하여 다음과 같이 요소의 너비를 계산할 수 있습니다.

으아아아

결과 값은 calc(50% + (50vh - 20px))입니다.

예

이 예에서는 @base-size 변수를 정의한 다음 더하기 및 빼기 연산을 사용하여 @large-size 및 @small-size 두 개의 새 변수를 만듭니다. @large-size 변수는 기본 크기에 4px를 더하고, @small-size 변수는 기본 크기에서 2px를 뺍니다. 그런 다음 이 변수를 사용하여 h1 및 p 요소의 글꼴 크기를 설정합니다.

으아아아

출력

으아아아

예

이 예에서는 변수를 사용하여 레이아웃의 기본 너비와 열 수를 설정합니다. 그런 다음 기본 너비를 열 수로 나누어 각 열의 너비를 계산합니다. 마지막으로 미디어 쿼리에서는 반너비 열의 너비를 곱셈으로 계산된 열 너비의 6배로 설정했습니다.

으아아아

출력

으아아아

예

이 예에서는 먼저 수학 설정을 항상으로 변경한 다음 제목 및 탐색 요소의 높이에 대한 변수를 정의합니다. calc() 함수를 사용하여 이전에 정의된 변수를 사용하여 주 요소의 높이를 계산합니다.

다음으로 수학 설정을 기본값으로 재설정하고 상자 너비와 패딩에 대한 새 변수를 정의합니다. 우리는 수학 연산을 사용하여 상자의 너비를 계산하고 이에 따라 너비를 설정합니다.

수학 설정을 항상으로 변경하면 복잡한 수학 연산을 가장 간단한 형태로 줄이지 않고도 수행할 수 있으므로 스타일을 더 효과적으로 제어할 수 있습니다.

으아아아

출력

으아아아

예

이 예에서는 두 가지 색상(@color-1 및 @color-2)을 정의하고 LESS를 사용하여 서로 다른 산술 연산을 수행합니다. 두 색상을 더한 후 첫 번째 색상에서 두 번째 색상을 빼고 첫 번째 색상에 50%를 곱한 다음 두 색상을 각 색상에 대해 50%의 가중치로 혼합합니다.

사용자는 각 작업이 CSS 속성의 값으로 사용될 수 있는 새로운 색상을 생성하는 것을 출력에서 ​​관찰할 수 있습니다.

으아아아

출력

으아아아

결론

사용자는 LESS에서 덧셈, 뺄셈, 곱셈, 나눗셈을 포함한 다양한 산술 연산을 사용하는 방법을 배웠습니다. 또한 복잡한 수학 계산을 수행하기 위해 calc() 함수를 사용하는 방법도 배웠습니다.

사용자는 숫자 값에 대한 산술 연산 외에도 색상에 대한 산술 연산에 대해서도 배웁니다. 여기에는 RGB, HEX 또는 HSL 값과 같은 색상 값을 더하거나 빼는 작업이 포함됩니다.

위 내용은 LESS에서 작업의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!