덜 CSS - 초보자 가이드
CSS 전처리 기는 이제 웹 개발의 필수 요소가되었습니다. Variables, Functions 또는 Mixin과 같은 프로그래밍 특성을 가진 일반 CSS와 웹 개발자가 빌드 할 수있는 Operation을 제공합니다. 모듈 형, 확장 성 및 관리 성이 뛰어난 CSS 스타일.
이번 포스트에서는 가장 인기있는 CSS 프리 프로세서 중 하나 인 LESS를 살펴보고 Bootstrap과 같은 수많은 프론트 엔드 프레임 워크에 널리 배포되었습니다. 우리는 또한 기본 유틸리티, 도구 및 설정을 사용하여 LESS를 시작하고 실행할 수 있습니다..
컴파일러
우선 컴파일러를 설정해야합니다. 덜 구문은 W3C 사양에 따라 비표준입니다. 브라우저는 CSS와 유사한 특성을 상속 함에도 불구하고 출력을 처리하고 렌더링 할 수 없습니다..
덜한 코드를 엿볼 수 있습니다 :
@ color-base : # 2d5e8b; .class1 background-color : @ color-base; .class2 배경색 : #fff; color : @ color-base;
컴파일러는 코드를 처리하고 LESS 구문을 브라우저 호환 CSS 형식으로 변환합니다.
.class1 background-color : # 2d5e8b; .class1 .class2 background-color : #fff; 색상 : # 2d5e8b;
CSS 컴파일을위한 여러 가지 도구가 있습니다.
JavaScript 사용
덜 필요하다. less.js 파일은 귀하의 웹 사이트에 배포하기 쉽습니다. 다음을 사용하여 스타일 시트 만들기 .적게 확장 프로그램을 사용하여 문서에서 rel = "stylesheet / less" 속성.
JS 파일을 Bower 패키지 관리자를 통해 다운로드하거나, CDN에 직접 링크하여 다음과 같이 다운로드 할 수 있습니다.
당신은 모두 설정되어 있으며 .적게. LESS 구문은 페이지가로드 될 때 즉시 컴파일됩니다. 명심하십시오. JavaScript를 사용하면 웹 사이트 성능에 심각한 영향을 미칠 수 있으므로 제작 단계에서는 권장하지 않습니다..
사전에 LESS 구문을 항상 컴파일해야하며 규칙적인 CSS를 제공하다 대신에. 당신이 사용할 수있는 단말기, Task Runner는 다음과 같다. 꿀꿀 거리는 소리 또는 꿀꺽 꿀꺽 마심, 또는 그렇게 할 수있는 그래픽 응용 프로그램.
CLI 사용
LESS는 기본 명령 줄 인터페이스 (CLI), lessc, 이는 LESS 구문을 컴파일하는 것 이상의 여러 가지 작업을 처리합니다. CLI를 사용하여 코드를 lint하고 파일을 압축하고 소스 맵을 작성할 수 있습니다. 이 명령은 Windows, OS X 및 Linux에서 효과적으로 명령을 실행할 수있게 해주는 Node.js를 기반으로합니다..
Node.js가 설치되었는지 확인하십시오 (그렇지 않으면 여기에서 설치 프로그램을 가져옵니다). 다음 명령 줄을 사용하여 NPM (노드 패키지 관리자)을 통해 LESS CLI를 설치하십시오..
npm install -g less
이제 당신은 lessc 명령을 CSS로 컴파일하려면 다음 명령을 사용하십시오.
lessc style.less style.css
작업 러너 사용
작업 실행자는 개발 작업 및 워크 플로를 자동화하는 도구입니다. 달리기보다는 lessc 명령을 사용하여 코드를 컴파일 할 때마다 작업 러너를 설치하고 LESS 파일 내의 변경 사항을 보도록 설정하고 즉시 LESS를 CSS로 컴파일 할 수 있습니다.
이 분야에서 인기있는 두 가지 도구는 Grunt and Gulp입니다. 우리는 이러한 도구를 다루는 일련의 게시물을 보유하고 있습니다. 게시물을 확인하여 워크 플로에 이러한 도구를 배포하는 방법을 알아보십시오..
- Grunt를 사용하여 워크 플로 자동화 방법
- Gulp.js 시작하기
- 빌드 스크립트의 전투 : Gulp Vs Grunt
그래픽 응용 프로그램 사용
터미널 및 명령 줄 사용에 익숙하지 않은 사용자는 대신 그래픽 인터페이스를 사용할 수 있습니다. 오늘 모든 플랫폼에서 덜 (less) 컴파일 할 수있는 응용 프로그램이 풍부합니다. 일부는 무료이고 일부는 유료입니다.
전체 목록은 다음과 같습니다.
| 앱 | 플랫폼 | 비용 |
| 혼합물 | OS X / Windows | 비어 있는 |
| 코알라 | OS X / Windows / Linux | 비어 있는 |
| Prepros | OS X / Windows | Freemium (USD29) |
| WinLESS | Windows | 비어 있는 |
| CodeKit | OS X | USD32 |
자바 스크립트를 제외하고 어떤 컴파일러를 선택 하느냐는 도구가 작동하고 워크 플로를 보완하는 한 솔직히 중요하지 않습니다..
코드 편집기
모든 코드 편집기를 사용할 수 있습니다. 적절한 색상으로 LESS 구문을 강조 표시하는 플러그인 또는 확장 기능을 설치하기 만하면됩니다.이 기능은 SublimeText, Notepad ++, VisualStudio, TextMate 및 Eclipse를 포함한 거의 모든 코드 편집기 및 IDE에서 사용할 수있는 기능입니다..
컴파일러와 코드 편집기를 모두 설정 했으므로 CSS 스타일을 LESS 구문으로 작성하기 시작할 수 있습니다.
덜 구문
일반적인 CSS와 달리 LESS는 프로그래밍 언어와 훨씬 비슷하게 작동합니다. 역동적이므로 일부 용어를 찾아야합니다. 변수, 조작 과 범위 길을 따라.
변수
무엇보다도 먼저 변수.
CSS로 꽤 오랫동안 일해온 경험이 있다면 아마도 스타일 시트 전체에 선언 블록에 반복적 인 값이 할당되어있을 것입니다..
.class1 background-color : # 2d5e8b; .class2 background-color : #fff; 색상 : # 2d5e8b; .class3 border : 1px solid # 2d5e8b;
이 연습은 실제로 괜찮습니다 - 우리가 더 많은 것을 탐색해야 할 때까지 천 개 이상의 유사한 스 니펫 스타일 시트 전체에 걸쳐. 이것은 대규모 웹 사이트를 구축 할 때 발생할 수 있습니다. 지루한 작업이 될 것입니다..
LESS와 같은 CSS 프리 프로세서를 사용하는 경우 위의 인스턴스는 문제가되지 않습니다. 변수. 변수를 사용하면 상수 나중에 전체 스타일 시트에서 다시 사용할 수있는 값.
@ color-base : # 2d5e8b; .class1 background-color : @ color-base; .class2 background-color : #fff; color : @ color-base; .class3 border : 1px solid @ color-base;
위 예제에서 우리는 색상을 저장합니다. # 2d5e8b ~ 안에 @ color-base 변하기 쉬운. 색상을 변경하려면이 변수의 값만 변경하면됩니다..
색상을 제외하고 예를 들어 변수에 다른 값을 넣을 수도 있습니다.
@ font-family : 조지아 @ 도트 경계선 : 점선으로 된 @ 전환 : 선형 @ 조리개 : 0.5
믹스 인
필요 이상으로 우리는 믹스 인 다른 규칙 집합에있는 CSS 규칙 집합의 전체 선언을 다시 사용합니다. 다음은 그 예입니다.
.그라디언트 배경 : #eaeaea; 배경 : 선형 그래디언트 (위쪽, #eaeaea, #cccccc); 배경 : -o-linear-gradient (상단, #eaeaea, #cccccc); 배경 : -ms-linear-gradient (위쪽, #eaeaea, #cccccc); 배경 : -moz-linear-gradient (위쪽, #eaeaea, #cccccc); 배경 : -webkit-linear-gradient (위쪽, #eaeaea, #cccccc);
위의 스 니펫에서 기본값을 사전 설정했습니다. 구배 내부의 색 .그라디언트 수업. 그라디언트를 추가 할 때마다 .그라디언트 이 방법:
div .gradients; 국경 : 1 픽셀 고체 # 555; border-radius : 3px;
그만큼 .상자 내부의 모든 선언 블록을 상속받습니다. .그라디언트. 위의 CSS 규칙은 다음과 같은 일반 CSS와 같습니다.
div 배경 : #eaeaea; 배경 : 선형 그래디언트 (위쪽, #eaeaea, #cccccc); 배경 : -o-linear-gradient (상단, #eaeaea, #cccccc); 배경 : -ms-linear-gradient (위쪽, #eaeaea, #cccccc); 배경 : -moz-linear-gradient (위쪽, #eaeaea, #cccccc); 배경 : -webkit-linear-gradient (위쪽, #eaeaea, #cccccc); 국경 : 1 픽셀 고체 # 555; border-radius : 3px;
또한 웹 사이트에서 CSS3를 많이 사용하는 경우 덜 복잡한 요소를 사용하여 작업을 훨씬 쉽게 할 수 있습니다. 덜한 요소는 공통의 모음입니다. CSS3 믹스 스타일 시트에서 자주 사용할 수있는 국경 - 반경, 그라디언트, 그림자 등등.
LESS 요소를 사용하려면 @수입 당신의 Less 스타일 시트에있는 규칙을 먼저 다운로드하고 작업 디렉토리에 추가하는 것을 잊지 마십시오..
@import "elements.less";
우리는 이제 모든 수업 제공 한 elements.less, 예를 들어 3px 국경 반지름을 div, 우리는 쓸 수있다:
div .rounded (3px);
추가 사용법은 공식 문서를 참조하십시오..
중첩 된 규칙
일반 CSS에서 스타일을 작성할 때 이러한 일반적인 코드 구조를 사용할 수도 있습니다.
nav 높이 : 40px; 너비 : 100 %; 배경 : # 455868; 테두리 아래 : 2 픽셀 고체 # 283744; nav li 너비 : 600 픽셀; 높이 : 40px; nav li a 색상 : #fff; 선 높이 : 40px; 텍스트 그림자 : 1px 1px 0px # 283744;
보통 CSS에서는 모든 규칙 집합에서 부모를 먼저 대상으로 선택하여 하위 요소를 선택합니다. “모범 사례” 원리.
덜 CSS에서는, 우리는 규칙 세트를 다음과 같이 단순화 할 수 있습니다. 부모 요소 안에 중첩 된 자식 요소, 다음과 같이;
nav 높이 : 40px; 너비 : 100 %; 배경 : # 455868; 테두리 아래 : 2 픽셀 고체 # 283744; li width : 600px; 높이 : 40px; a color : #fff; 선 높이 : 40px; 텍스트 그림자 : 1px 1px 0px # 283744;
또한 가상 클래스, 처럼 : 마우스 오버, 앰퍼샌드 (&) 기호를 사용하여 선택기로.
추가하려는 항목을 : 마우스 오버 위의 앵커 태그에 다음과 같이 작성할 수 있습니다.
a color : #fff; 선 높이 : 40px; 텍스트 그림자 : 1px 1px 0px # 283744; & : hover 배경색 : # 000; color : #fff;
조작
우리는 또한 다음과 같은 작전을 수행 할 수 있습니다. 덧셈, 뺄셈, 곱셈과 나눗셈 스타일 시트의 숫자, 색상 및 변수.
요소 B가 요소 A의 2 배가되기를 원한다고 가정 해 봅시다.이 경우 다음과 같이 작성할 수 있습니다.
@height : 100 픽셀. 요소 -A 높이 : @ 높이; .element-B height : @height * 2;
위에서 볼 수 있듯이, 우리는 먼저 값을 @신장 변수에 값을 할당 한 다음 요소 A에 값을 할당하십시오..
요소 B에서 높이를 스스로 계산하는 것이 아니라, 높이를 2 배로 늘릴 수 있습니다. 별표 연산자 (*)를 사용하십시오. 이제 우리가 @신장 변하기 쉬운, 요소 B 항상 높이의 두 배가됩니다..
이전 자습서의 고급 작동 예제를 확인하십시오. Slick Menu Navigation Bar 디자인.
범위
LESS가 범위 개념은 변수가 먼저 로컬 범위에서 상속되고 로컬에서 사용할 수없는 경우 더 넓은 범위를 검색합니다.
머리글 @ 색상 : 검정색; background-color : @color; nav @color : blue; background-color : @color; a color : @color;
위의 예에서 머리글 ~을 가지고있다. 검은 배경 색상,하지만 항해하다님의 배경색은 푸른 로컬 범위에 @color 변수가 있기 때문에 에이 더 가까운 부모로부터 상속받은 푸른 색도 가질 것입니다., 항해하다.
최종 생각
궁극적으로,이 게시물을 통해 LESS를 사용하여 더 나은 방법으로 CSS를 작성하는 방법에 대한 기본적인 이해를 얻을 수 있기를 바랍니다. 처음에는 약간 어색함을 느낄 수도 있지만, 더 자주 시도 할 때 분명 더 쉬울 것입니다..
다음은 몇 가지 자습서로, 더 많은 팁과 실습을 들여다 보도록 권장합니다.이 기술은 당신의 덜 숙련 된 스킬을 다음 단계로 끌어 올릴 수 있습니다..
- 덜 CSS 튜토리얼 : 매끄러운 메뉴 탐색 모음 디자인
- 덜 컬러 함수 이해하기
- 3 가지 새로운 CSS 기능 알아보기
