적은 CSS에서 기능을 사용하는 방법

함수는 프로그래밍 경험을 크게 단순화하며 이는 CSS 코드를 작성할 때도 마찬가지입니다.

Less CSS는 최근 몇 년간 큰 관심과 인기를 얻은 강력하고 역동적인 CSS 전처리기입니다. 전처리기로서 이는 전반적인 스타일링 경험을 향상시키는 일련의 추가 기능을 제공함으로써 웹 개발에 사용되는 전통적인 CSS 스타일링 언어인 "바닐라 CSS"의 확장 역할을 합니다.

표준 CSS 작성에 능숙하다면 가파른 학습 곡선 없이 Less CSS 사용으로 원활하게 전환할 수 있습니다. 이러한 호환성을 통해 Less의 고급 기능을 활용하면서 기존 CSS 지식을 쉽게 유지할 수 있습니다.

프로그래밍에서 함수는 특정 작업을 수행하는 코드 블록입니다. 프로그램의 다른 곳에서 재사용할 수도 있습니다. 함수는 일반적으로 데이터를 가져와서 처리하고 결과를 반환합니다.

프로그램 내에서 중복 코드를 쉽게 줄일 수 있습니다. 예를 들어, 사용자가 입력한 가격을 기준으로 할인을 계산하는 프로그램이 있다고 가정해 보겠습니다. JavaScript와 같은 언어에서는 다음과 같이 구현할 수 있습니다.

그런 다음 함수를 호출하고가격그리고한계점.

할인 확인을 위한 논리를 추상화함으로써 프로그램을 읽을 수 있을 뿐만 아니라 할인을 처리하고 결과를 반환하는 재사용 가능한 코드 블록을 갖게 되었습니다. 함수로 할 수 있는 일이 훨씬 더 많지만 이는 단지 기본일 뿐입니다.

기존 CSS에서는 개발자가 사용할 수 있는 기능이 매우 제한되어 있습니다. CSS에서 가장 인기 있는 함수 중 하나는 calc()입니다.보이는 그대로 정확하게 수행되는 수학 함수입니다. 즉, 계산을 수행하고 그 결과를 CSS의 속성 값으로 사용합니다.

Less CSS에는 산술 연산 이상의 기능을 수행하는 여러 함수가 있습니다. Less에서 접할 수 있는 기능 중 하나는만약에 기능. 그만큼만약에 함수는 조건과 값 두 개라는 세 가지 매개변수를 사용합니다. 아래 코드 블록은 이 기능을 사용하는 방법을 보여줍니다.

위의 코드 블록에서 Less 컴파일러는 변수가너비(에 의해 정의됨@기호)가 변수보다 큽니다.키 . 조건이 true인 경우 함수는 조건 뒤의 첫 번째 값(10px)을 반환합니다. 그렇지 않으면 함수는 두 번째 값(20px)을 반환합니다.

컴파일 후 CSS 출력은 다음과 같아야 합니다.

부울은 두 가지 가능한 값을 갖는 변수입니다.진실또는거짓 . 와 더불어부울() Less의 함수를 사용하면 나중에 사용하기 위해 표현식의 참 또는 거짓 값을 변수에 저장할 수 있습니다. 작동 방식은 다음과 같습니다.

위의 코드 블록에서 Less 컴파일러는 다음을 확인합니다.텍스트 색상 빨간색입니다. 그런 다음,bg-color변수는 값을 저장합니다.

위의 코드 블록은 다음과 같이 컴파일됩니다.

구문은바꾸다()기능은 다음과 같습니다

끈검색하고 바꾸려는 문자열을 나타냅니다.무늬검색할 문자열입니다.무늬 정규식일 수도 있지만 일반적으로 문자열입니다. 일치가 성공적으로 이루어지면 Less CSS 컴파일러가 이를 대체합니다.무늬와 더불어대사.

선택적으로,바꾸다()함수에는깃발정규식 플래그에 대한 매개변수입니다.

위의 코드 블록은 컴파일 후 다음과 같은 결과를 가져옵니다.

Less CSS에서는 쉼표나 공백을 사용하여 값 목록을 정의합니다. 예를 들어:

당신은 사용할 수 있습니다길이()목록의 요소 수를 평가하는 함수입니다.

다음을 사용할 수도 있습니다.발췌() 특정 위치의 값을 추출하는 함수입니다. 예를 들어, 세 번째 요소를 가져오려는 경우