부트스트랩과 함께 LESS 사용

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

왜 적게?

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

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

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

더 알아보기

적은 CSS

자세한 내용은 공식 웹사이트 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

영웅 유닛

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

믹스인 정보

기본 믹스인

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

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

파라메트릭 믹스인

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

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

쉽게 자신의 추가

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

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

포함된 믹스인

유용

믹신 매개변수 용법
.clearfix() 없음 내에서 부동 소수점을 지우려면 모든 상위 항목에 추가하십시오.
.tab-focus() 없음 Webkit 포커스 스타일 및 둥근 Firefox 윤곽선 적용
.center-block() 없음 다음을 사용하여 블록 수준 요소를 자동 중앙에 배치margin: auto
.ie7-inline-block() 없음 display: inline-blockIE7 지원을 받으려면 일반에 추가하여 사용하십시오.
.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 열을 사용하도록 합니다.
.hyphens() @mode: auto 원할 때 CSS3 하이픈 넣기(포함 word-wrap: break-word)

배경 및 그라디언트

믹신 매개변수 용법
#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 명령줄 컴파일러, JSHint, Recess 및 uglify-js를 전역으로 설치합니다.

$ npm install -g less jshint 휴회 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 파일을 저장할 때마다 코드를 로컬 파일로 컴파일합니다.

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

더 많은 Mac 앱

결정적 시기

Crunch는 Adobe Air를 기반으로 구축된 멋진 LESS 편집기 및 컴파일러입니다.

코드킷

비공식 Mac 앱과 같은 사람이 만든 CodeKit은 LESS, SASS, Stylus 및 CoffeeScript를 컴파일하는 Mac 앱입니다.

단순함

LESS 파일의 드래그 앤 드롭 컴파일을 위한 Mac, Linux 및 PC 앱. 또한 소스 코드는 GitHub에 있습니다 .