부트스트랩과 함께 LESS 사용

부트스트랩의 CSS를 빌드하는 데 사용되는 변수, 믹스인 등을 활용하기 위해 CSS 전처리 기인 LESS 로 부트스트랩을 사용자 정의하고 확장 하십시오.

왜 적게?

Bootstrap은 우리의 좋은 친구 Alexis Sellier 가 만든 동적 스타일시트 언어인 LESS를 핵심으로 하여 만들어졌습니다 . 시스템 기반 CSS를 더 빠르고 쉽고 재미있게 개발할 수 있습니다.

무엇이 포함되어 있습니까?

CSS의 확장인 LESS에는 변수, 재사용 가능한 코드 스니펫용 믹스인, 간단한 수학 연산, 중첩 및 색상 기능도 포함됩니다.

더 알아보기

자세한 내용은 공식 웹사이트 http://lesscss.org/ 를 방문하십시오.

변수

CSS에서 색상과 픽셀 값을 관리하는 것은 일반적으로 복사 및 붙여넣기로 가득 찬 약간의 고통이 될 수 있습니다. LESS는 아니지만 색상이나 픽셀 값을 변수로 할당하고 한 번 변경합니다.

믹신

일반 CSS에서 만들어야 하는 세 가지 테두리 반경 선언은? 이제 어디에서나 재사용할 수 있는 코드 스니펫인 믹스인을 사용하여 한 줄로 줄였습니다.

운영

연산을 사용하여 즉석에서 수학을 수행하여 그리드, 리딩 및 더욱 유연하게 만들 수 있습니다. 곱하기, 나누기, 더하기 및 빼기 방법으로 CSS 온전함을 얻으십시오.

비계 및 링크

`@bodyBackground`	`@white`	페이지 배경색
`@textColor`	`@grayDark`	전체 본문, 제목 등의 기본 텍스트 색상
`@linkColor`	`#08c`	기본 링크 텍스트 색상
`@linkColorHover`	`darken(@linkColor, 15%)`	기본 링크 텍스트 호버 색상

그리드 시스템

`@gridColumns`	12
`@gridColumnWidth`	60픽셀
`@gridGutterWidth`	20픽셀
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

타이포그래피

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, 산세리프체
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", 모노스페이스
`@baseFontSize`	13픽셀	픽셀이어야 합니다.
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18픽셀	픽셀이어야 합니다.
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

테이블

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

그레이스케일 색상

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#에이
`@white`	#ffff

강조 색상

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

구성품

버튼

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

양식

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

양식 상태 및 경고

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

나브바

`@navbarHeight`	40픽셀
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

드롭다운

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

영웅 유닛

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

믹스인 정보

기본 믹스인

기본 믹스인은 본질적으로 CSS 조각에 대한 포함 또는 부분입니다. CSS 클래스처럼 작성되었으며 어디에서나 호출할 수 있습니다.

. 요소 {
  . 클리어픽스 ();
}

파라메트릭 믹스인

매개변수 믹스인은 기본 믹스인과 비슷하지만 선택적 기본값이 있는 매개변수(따라서 이름)도 허용합니다.

. 요소 {
  . 테두리 - 반경 ( 4px );
}

쉽게 자신의 추가

거의 모든 부트스트랩의 믹스인은 도구 키트의 .less 파일에서 믹스인을 사용할 수 있게 해주는 훌륭한 유틸리티 .less 파일인 mixins.less에 저장됩니다.

따라서 기존 것을 사용하거나 필요에 따라 자유롭게 추가하십시오.

포함된 믹스인

유용

믹신	매개변수	용법
`.clearfix()`	없음	내에서 부동 소수점을 지우려면 모든 상위 항목에 추가하십시오.
`.tab-focus()`	없음	Webkit 포커스 스타일 및 둥근 Firefox 윤곽선 적용
`.center-block()`	없음	다음을 사용하여 블록 수준 요소를 자동 중앙에 배치`margin: auto`
`.ie7-inline-block()`	없음	`display: inline-block`IE7 지원을 받으려면 일반에 추가하여 사용하십시오.
`.size()`	`@height @width`	한 줄에 높이와 너비를 빠르게 설정
`.square()`	`@size`	`.size()`너비와 높이를 동일한 값으로 설정하기 위해 빌드합니다.
`.opacity()`	`@opacity`	불투명도 백분율을 정수로 설정합니다(예: "50" 또는 "75").

양식

믹신	매개변수	용법
`.placeholder()`	`@color: @placeholderText`	`placeholder`입력에 대한 텍스트 색상 설정

타이포그래피

믹신	매개변수	용법
`#font > #family > .serif()`	없음	요소가 세리프 글꼴 스택을 사용하도록 만들기
`#font > #family > .sans-serif()`	없음	sans-serif 글꼴 스택을 사용하는 요소 만들기
`#font > #family > .monospace()`	없음	고정 폭 글꼴 스택을 사용하는 요소 만들기
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	글꼴 크기, 두께 및 행간을 쉽게 설정
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	글꼴 모음을 serif로 설정하고 크기, 두께 및 행간을 제어합니다.
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	글꼴 모음을 sans-serif로 설정하고 크기, 두께 및 행간을 제어합니다.
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	글꼴 모음을 고정 폭으로 설정하고 크기, 두께 및 행간을 제어합니다.

그리드 시스템

믹신	매개변수	용법
`.container-fixed()`	없음	콘텐츠를 담을 수 있는 수평 중앙 컨테이너 만들기
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	n개의 열과 x 픽셀 너비의 거터 가 있는 픽셀 그리드 시스템(컨테이너, 행 및 열) 생성
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	n개의 열과 x % 너비의 거터 가 있는 현재 그리드 시스템 생성
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	`input`패딩 및 테두리를 고려하여 요소에 대한 픽셀 그리드 시스템 생성
`.makeColumn`	`@columns: 1, @offset: 0`	클래스 없이 any `div`를 그리드 열로 변환`.span*`

CSS3 속성

믹신	매개변수	용법
`.border-radius()`	`@radius`	요소의 모서리를 둥글게 만듭니다. 단일 값 또는 4개의 공백으로 구분된 값일 수 있습니다.
`.box-shadow()`	`@shadow`	요소에 그림자 추가
`.transition()`	`@transition`	CSS3 전환 효과 추가(예: `all .2s linear`)
`.rotate()`	`@degrees`	요소를 n 도 회전
`.scale()`	`@ratio`	요소를 원래 크기의 n 배로 조정
`.translate()`	`@x, @y`	x 및 y 평면에서 요소 이동
`.background-clip()`	`@clip`	요소의 배경 자르기( 에 유용함 `border-radius`)
`.background-size()`	`@size`	CSS3를 통해 배경 이미지 크기 제어
`.box-sizing()`	`@boxmodel`	요소의 상자 모델 변경(예: `border-box`전체 너비의 경우 `input`)
`.user-select()`	`@select`	페이지에서 텍스트의 커서 선택 제어
`.backface-visibility()`	`@visibility: visible`	CSS 3D 변환 사용 시 콘텐츠 깜박임 방지
`.resizable()`	`@direction: both`	모든 요소를 오른쪽과 아래쪽에서 크기 조정 가능하게 만들기
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	모든 요소의 콘텐츠가 CSS3 열을 사용하도록 합니다.

배경 및 그라디언트

믹신	매개변수	용법
`#translucent > .background()`	`@color: @white, @alpha: 1`	요소에 반투명 배경색 지정
`#translucent > .border()`	`@color: @white, @alpha: 1`	요소에 반투명 테두리 색상 지정
`#gradient > .vertical()`	`@startColor, @endColor`	브라우저 간 세로 배경 그라디언트 만들기
`#gradient > .horizontal()`	`@startColor, @endColor`	크로스 브라우저 가로 배경 그라디언트 만들기
`#gradient > .directional()`	`@startColor, @endColor, @deg`	브라우저 간 방향 배경 그라디언트 만들기
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	브라우저 간 3색 배경 그라디언트 만들기
`#gradient > .radial()`	`@innerColor, @outerColor`	브라우저 간 방사형 배경 그라디언트 만들기
`#gradient > .striped()`	`@color, @angle`	브라우저 간 줄무늬 배경 그라디언트 만들기
`#gradientBar()`	`@primaryColor, @secondaryColor`	버튼에 그라디언트 및 약간 더 어두운 테두리를 할당하는 데 사용됩니다.

참고: 수정된 CSS를 사용하여 GitHub에 pull 요청을 제출하는 경우 이러한 방법을 통해 CSS를 다시 컴파일 해야 합니다 .

컴파일 도구

메이크파일이 있는 노드

다음 명령을 실행하여 npm으로 LESS 명령줄 컴파일러와 uglify-js를 전역적으로 설치합니다.

$ npm install -g 덜 uglify-js

일단 설치되면 make부트스트랩 디렉토리의 루트에서 실행하기만 하면 모든 설정이 완료됩니다.

또한 watchrmake watch 가 설치되어 있으면 부트스트랩 라이브러리에서 파일을 편집할 때마다 부트스트랩이 자동으로 다시 빌드 되도록 실행할 수 있습니다 (필수 사항이 아니라 편의 방법일 뿐입니다).

명령줄

노드를 통해 LESS 명령줄 도구를 설치하고 다음 명령을 실행합니다.

$ lessc ./less/bootstrap.less > bootstrap.css

--compress일부 바이트를 저장하려는 경우 해당 명령 에 포함해야 합니다!

자바스크립트

최신 Less.js를 다운로드하고 해당 경로(및 부트스트랩)를 <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less 파일을 다시 컴파일하려면 파일을 저장하고 페이지를 다시 로드하면 됩니다. Less.js는 이를 컴파일하여 로컬 저장소에 저장합니다.

비공식 Mac 앱

비공식 Mac 앱 은 .less 파일의 디렉토리를 감시하고 감시된 .less 파일을 저장할 때마다 코드를 로컬 파일로 컴파일합니다.

원하는 경우 자동 축소를 위한 앱의 기본 설정과 컴파일된 파일이 끝나는 디렉터리를 전환할 수 있습니다.

LESS로 구축

왜 적게?

무엇이 포함되어 있습니까?

더 알아보기

변수

믹신

운영

부트스트랩 변수 LESS 변수, 해당 값 및 사용 지침

비계 및 링크

그리드 시스템

타이포그래피

테이블

그레이스케일 색상

강조 색상

구성품

버튼

양식

양식 상태 및 경고

나브바

드롭다운

영웅 유닛

부트스트랩 믹스인

믹스인 정보

기본 믹스인

파라메트릭 믹스인

쉽게 자신의 추가

포함된 믹스인

유용

양식

타이포그래피

그리드 시스템

CSS3 속성

배경 및 그라디언트

LESS로 부트스트랩 컴파일하기

컴파일 도구

메이크파일이 있는 노드

명령줄

자바스크립트

비공식 Mac 앱

더 많은 Mac 앱

결정적 시기

코드킷

단순함