덜 요령과 도구로 효과적으로 일함
이전 자습서에서는 ChrunchApp와 같은 응용 프로그램을 사용하여 코드를 컴파일하여 실제 방법으로 LESS를 사용하는 방법을 배웠습니다. 이번에는 LESS 구문을 컴파일 할 때 성능과 생산성을 향상시킬 수있는 유용한 팁을 살펴 보겠습니다. 우리는 현재 편집자를 위해 구문 하이라이팅을 활성화하고, 자동 컴파일러 도구를 사용하고, 미리 설정된 Mixins을 사용하고, 모두 함께 동기화하여 데스크탑 / 작업 환경을 설정하려고합니다.
글쎄, 준비가 되었다면 시작하자..
기권: 아래에 설명 된 팁은 웹 디자이너로서의 나의 일상 경험에서 파생됩니다. 그래서 우리가 더 자세히 살펴보기 전에 팁이 다른 디자이너가 아닌 일부 디자이너에게 적합 할 수 있다고 설명하고 싶습니다. 다른 팁과 마찬가지로 웹에서 찾을 수 있습니다. 그럼에도 불구하고 다음 팁에서 유용한 것을 얻을 수 있기를 바랍니다..
1. 코드 하이 라이터
이전에 언급했듯이 ChrunchApp에 대해 소개했습니다. 그러나이 앱은 모든 웹 디자이너가 선호하는 것은 아닙니다. 각 디자이너는 자신이 선택한 코드 편집기를 포함하여 자신의 작업 환경을 가지고 있기 때문에.
다른 코드 편집기를 설치하는 대신 실제로 현재 코드 편집기를 사용하고 구문 강조를 활성화 할 수 있습니다. 따라서이 글에서는 2 개의 유명한 텍스트 편집기에 LESS 코드 강조 표시를 추가하는 몇 가지 팁을 공유 할 것입니다. 숭고한 텍스트 2 과 메모장++.
숭고한 텍스트 2
이 편집기는 현재 코드 작성을 돕기 위해 제가 선호하는 선택입니다. 이 응용 프로그램은 Windows, Linux 및 OSX에서 사용할 수 있으므로 OS가 무엇이든간에이 팁을 계속 따라 할 수 있습니다..
이제 공식 웹 사이트에서 다운로드하여이 편집기를 사용해 봅시다. 그런 다음 다음 지침을 읽고 그 안에 더 적은 색상 강조 표시를 사용하십시오.
노트 : 무료 버전은 평가 목적으로 만 사용되므로 다운로드하기 전에 라이센스를 읽었는지 확인하십시오..
패키지 콘솔 설치
먼저 Sublime Text 2를 열고이 메뉴에서 콘솔을 표시하십시오. 보기> 콘솔보기
그런 다음 콘솔에 다음 명령 행을 복사하여 붙여 넣은 다음 Enter 키를 눌러 wBond.net에서 패키지 제어를 설치하십시오.
import urllib2, os; pf = "패키지 Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) 그렇지 않으면 os.path.exists (ipp) else 없음; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ( 'http://sublime.wbond.net/ '+pf.replace ( ",'% 20 ')). read ()); print '설치를 끝내려면 Sublime Text를 다시 시작하십시오.' 
이 패키지 콘솔 강조 패키지를 설치하는 데 도움이 될 것입니다..
중요하지 않은 패키지 설치
Sublime Text 2를 다시 시작하고이 메뉴에서 명령 팔레트를 표시하십시오. 도구> 명령 팔레트. 패키지 목록이 모두로드 될 때까지 기다리십시오. 그런 다음 패키지 설치 패키지 리포지토리를 검색하고로드하는 방법.
그런 다음 저장소 목록에서 LESS 패키지를 검색하고 Enter 키를 누릅니다..
상태 표시 줄에 다음 알림이 나타날 때까지 Sublime Text 2가 잠시 기다려 패키지를 다운로드하고 설치하십시오..
메뉴로 이동 보기> 구문, 목록에 LESS가 표시되어야합니다. 그것은 숭고한 본문 2가 .적게 그리고 귀하의 Less 구문은 또한 적절한 색상 강조 표시를 가져야합니다..
메모장++
Notepad ++는 무료 오픈 소스 코드 편집기로, 기능을 확장하는 데 유용한 플러그인이 많이 있습니다. 그것은 또한 많은 웹 디자이너 / 개발자, 특히 Windows 운영 체제를 사용하는 개발자들에 의해 널리 사용됩니다. 그래서 팁을 추가하여 덜한 텍스트 강조를 추가합니다..
메모장에 LESS-highlight를 설치하십시오.++
메모장 + +에서 LESS 색상 강조 표시를 사용 가능하게 설정하는 것은 매우 쉽습니다..
먼저이 링크 (userDefineLang_LESS.xml)에서 Notepad ++ 용 LESS 패키지를 다운로드하십시오. 그런 다음 이동 보기> 사용자 정의 대화 상자.
아래의 팝업 상자가 나타납니다. 클릭 수입… 버튼을 클릭하고 다운로드 위치를 찾습니다. .xml 파일. 그런 다음 메모장을 다시 시작하십시오.++.
.less 파일을 열고 언어 메뉴로 이동하십시오. 이제 LESS가 포함 된 것을 볼 수 있습니다. 원하지 않는 구문에 색상 강조 표시를 적용하려면 선택하십시오..
추가 리소스
시장에 다른 많은 편집자가 있습니다. 위의 편집기를 사용하지 않으면 유용한 링크가 포함됩니다..
Adobe Dreamweaver
의심 할 여지없이 Dreamweaver에는 거대한 사용자 기반이 있습니다. Mac과 Windows 모두에서 사용할 수 있습니다. 따라서이 편집기를 사용하는 경우 Adobe Dreamweaver에서보다 작게 강조 표시를 설치하는 것이 좋습니다..
코다
Mac을 사용하는 경우 Coda를 잘 알고있을 것입니다.이 편집기는 Mac 사용자 중 가장 인기있는 편집기 중 하나입니다. 그리고 Coda에 LESS를 설치하는 방법은 다음과 같습니다..
게 야니
리눅스 사용자 중 가장 인기있는 코드 편집기 중 하나입니다. Linux에서 실행되는 내 사무실의 일부 컴퓨터도 Geany를 사용합니다. 따라서 SuperUser.com에서이 지침을 따르면 덜 강조 표시를 포함 할 수 있습니다.
2. less 컴파일러
LESS 컴파일러가 내장 된 ChrunchApp와는 달리, 다른 편집자는 기본적으로 LESS 컴파일러를 가지고 있지 않습니다. 그것을 포함시키는 방법이 몇 가지 있지만, 일반 사용자에게는 오히려 기술적입니다. 그래서 내가 가진 최상의 솔루션은 다음 도구를 사용하여 컴파일하는 것입니다. WinLESS 또는 LESS.app. WinLESS는 Windows 용으로 설계된 컴파일러이며 LESS.app는 OSX 용으로 제작되었습니다..
이 도구는 파일에 오류가있는 경우 직접 파일을 저장하고보고 할 때 LESS 코드를 정적 CSS로 자동 변환 할 수 있습니다. 자,이 도구가 얼마나 유용한 지 보여 드리겠습니다.
첫째, WinLESS를 다운로드하고 설치하고 싶습니다..
폴더 추가 버튼을 클릭하고 폴더를 넣은 디렉토리를 찾습니다. .적게 파일 (적어도 하나 이상을 이미 생성했다고 가정). 일단 당신이 하나 추가; WinLESS가 모든 것을 검색하고 찾는다. .적게 파일을 읽고 목록에 표시합니다..
메뉴로 이동 파일> 설정, 이 옵션이 선택되어 있는지 확인하십시오.
- 저장시 파일 자동 컴파일
- 성공적인 컴파일시 메시지 표시
우리는 출력 폴더를 설정할 수 있습니다. 다른 곳에 저장할 경우에 대비해 출력 폴더를 설정할 수 있습니다. 그러나이 예제에서는이 옵션을 그대로 두겠습니다. 이는 출력 파일이 파일과 동일한 디렉토리에 저장됨을 의미합니다. .적게 파일.
너를 열어 라. .적게 파일을 추가 한 디렉토리에서 가져 와서 몇 가지 사항을 변경하고 저장하십시오..
파일이 성공적으로 컴파일되면 WinLESS가 알려줍니다. .CSS 또는 코드에 오류가있는 경우. 이렇게하면 코드를 컴파일 할 때까지 기다리지 않고 .css 출력을 직접 확인할 수 있습니다..
Mac을 사용하는 경우 WinLESS와 동일한 기능을하는 LESS.app를 사용할 수 있습니다..
프리 세트 믹스
현재의 웹 디자인 관례에서는 Gradient, Shadow 또는 Border Radius와 같은 CSS3 속성을 사용합니다.
-webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px;
또는
배경 : -moz-linear-gradient (맨 위, # f0f9ff 0 %, # a1dbff 100 %); 배경 : -webkit-linear-gradient (상단, # f0f9ff 0 %, # a1dbff 100 %); 배경 : -o-linear-gradient (맨 위, # f0f9ff 0 %, # a1dbff 100 %); 배경 : -ms-linear-gradient (맨 위, # f0f9ff 0 %, # a1dbff 100 %); 배경 : 선형 그래디언트 (맨 위, # f0f9ff 0 %, # a1dbff 100 %);
이전 튜토리얼에서는이 구문을 단순화하기 위해 몇 가지 Mixins를 만들었습니다. 다행히도 웹 디자인 공동체의 사람들 중 일부는 이러한 유용한 Mixins을 컴파일 할 시간을 아끼지 않을 정도로 관대하므로 처음부터 직접 컴파일 할 필요가 없습니다.
그리고 가장 좋아하는 요소 중 하나는 CSS3 사전 설정 규칙이 많이 포함 된 Less Elements입니다. 따라서 지루한 벤더 접두사에서 적은 수의 코드를 작성합니다..
좋습니다. 이제 위의 모든 팁이 실제로 도움이되는지 봅시다..
함께 모으기
이 예제에서는 간단한 링크 버튼을 만들 것입니다. 먼저 새 HTML 문서를 만들고 다음 마크 업을 작성하려고합니다.
적게 클릭 해주세요
만들기 styles.less 우리의 주요 LESS 스타일 시트로, 우리의 HTML 문서와 같은 폴더에 그것을 저장하고 폴더를 WinLESS에 추가하십시오.
가져 오기 elements.less 우리는이 구문을 사용하기 전에 다운로드했습니다.
@import "elements.less";
이제 elements.less와 같은 Mixins를 사용할 수 있습니다. .구배, .둥근, 과 .경계가있는. 나는 Mixins 이름이 확실히 자명하다라고 확신한다..
다음으로 LESS 규칙을 스타일 시트에 넣으십시오. 그리고 다시 한 번 저장하십시오.
a 디스플레이 : 인라인 블록; 패딩 : 10px 20px; color : # 555; 텍스트 장식 : 없음; .bw-gradient (#eee, 240, 255); .rounded; 테두리가있는; & : hover .bw-gradient (#eee, 255, 240);
우리가 .적게 파일이 WinLESS에 추가되면 자동으로 컴파일됩니다. .CSS. 이제 결과를 봅시다..
음,이 버튼이 필요한 것보다 적은 수의 선으로 만들어 졌다고 생각하면 그렇게 나쁘지 않습니다. 그리고 여기 실제 생성 된 정적 CSS가 있습니다.
a 디스플레이 : 인라인 블록; 패딩 : 10px 20px; color : # 555; 텍스트 장식 : 없음; 배경 : #eeeeee; 배경 : -webkit-gradient (선형, 왼쪽 아래, 왼쪽 위, 컬러 스톱 (0, # f0f0f0), 컬러 스톱 (1, #ffffff)); 배경 : -ms-linear-gradient (하단, # f0f0f0 0 %, # f0f0f0 100 %); 배경 : -moz-linear-gradient (중앙 하단, # f0f0f0 0 %, #ffffff 100 %); -webkit-border-radius : 2px; -moz-border-radius : 2px; border-radius : 2px; -moz-background-clip : 패딩; -webkit-background-clip : 패딩 상자; 배경 클립 : 패딩 상자; border-top : 솔리드 1px #eeeeee; border-left : 솔리드 1px #eeeeee; 국경 - 오른쪽 : 단색 1px #eeeeee; border-bottom : 솔리드 1px #eeeeee; a : hover background : #eeeeee; 배경 : -webkit-gradient (선형, 왼쪽 아래, 왼쪽 위, 컬러 스톱 (0, #ffffff), 컬러 스톱 (1, # f0f0f0)); 배경 : -ms-linear-gradient (아래쪽, #ffffff 0 %, #ffffff 100 %); 배경 : -moz-linear-gradient (가운데 아래쪽, #ffffff 0 %, # f0f0f0 100 %);
요약하자면
이 게시물에서 우리가 토론 한 내용을 간략히 요약하면 다음과 같습니다.
- 현재 편집기에서 구문 강조를 활성화하면 더 적은 구문을 작성하기위한 추가 편집기 만 설치할 필요가 없습니다. 이렇게하면 디스크 공간을 절약 할 수 있습니다..
- 마지막 튜토리얼에서했던 것처럼 더 이상 LESS.js 라이브러리를 다운로드하여 HTML 헤드 섹션에 연결할 필요도 없습니다. 이렇게하면 HTML 문서가 깨끗하고 깨끗합니다..
- WinLESS 및 LESS.app와 같은 컴파일러 도구를 사용하면 정적 CSS 출력을 즉시 생성 할 수 있습니다. 구문에 이상이있는 경우 즉시 검토 할 수 있습니다..
- LESS Elements와 같은 프리 세트 믹스는 가장 친한 친구입니다. 지루한 CSS3 속성을 컴파일 할 때 실제로 시간을 절약 할 수 있습니다..
.
