less 예제

mixins가 할 수있는 또 다른 멋진 것은 매개 변수를수신하는 것입니다. 다음 예제에서는 기본값이 25픽셀인 원의 너비와 높이에 대한 인수를 추가합니다. 이렇게하면 작은 원 25×25 및 큰 100×100 픽셀이 생성됩니다. 위의 예에서 배경색은 흰색이며 텍스트는 어둡습니다. 이 것들을 바꿔 흰색 텍스트로 어두운 요소를 사용하려는 경우 모든 발생을 수동으로 대체하는 대신 변수의 값을 변경할 수 있습니다. 이전 자습서에서 더 많은 고급 작업 예제를 확인: 매끄러운 메뉴 탐색 모음 디자인. 걸프는 자바 스크립트 기반의 작업 러너입니다. 평신도 용어로, 그것은 당신이 당신의 개발 워크플로를 자동화하는 데 도움이됩니다. CSS를 축소하고, 파일을 프로덕션 폴더로 옮기고, CSS에 더 적게 컴파일하는 등의 작업을 수행할 수 있습니다. 이것은 덜 컴파일하는 나의 바람직한 방법입니다. 나는 시도하고 당신을 위해 적은 과 걸프의 오버 헤드를 모두 제거하여이 죽은 간단하게 만들거야.

이 방법으로 바로 다이빙할 수 있습니다. 나는 이미 당신을 위해 구성된 덜 죽은 간단한 Gulp 설정을 구성했습니다. 여기에서 확인할 수 있습니다. Less가 CSS처럼 보이기 때문에 이를 배우는 것은 바람입니다. 덜 그것은 너무 빨리 배울 수있는 이유 중 하나입니다 CSS 언어에 몇 가지 편리한 추가합니다. Sass에서는 변수를 사용하여 코드 전체에서 재사용할 값을 저장할 수 있습니다. Sass 변수는 위의 예제에서 볼 수 있듯이 $ 기호로 준비됩니다. Sass 변수에는 범위가 있으므로 로컬 및 전역 모두에서 변수를 사용할 수 있으므로 매우 다양합니다. Less는 색상을 변환하고 문자열을 조작하며 수학을 수행하는 다양한 기능을 제공합니다. 함수 참조에 완전히 문서화되어 있습니다. LESS를 사용하면 기존 클래스 또는 ID를 사용하고 모든 스타일을 다른 선택기에 직접 적용할 수 있습니다. 다음 예제는 일을 정리합니다 : 때로는, 당신은 조직 목적을 위해, 또는 단지 몇 가지 캡슐화를 제공하기 위해, 당신의 mixins을 그룹화 할 수 있습니다.

당신은 덜에서 매우 직관적으로이 작업을 수행 할 수 있습니다. 나중에 재사용하거나 배포하기 위해 #bundle 따라 일부 mixins 및 변수를 번들로 묶는 다고 가정해 보세요: Less의 주요 기능 중 하나는 표준 프로그래밍 언어와 마찬가지로 변수를 만드는 기능입니다.