Sử dụng LESS với Bootstrap

Tùy chỉnh và mở rộng Bootstrap với LESS , một bộ tiền xử lý CSS, để tận dụng các biến, mixin và nhiều thứ khác được sử dụng để xây dựng CSS của Bootstrap.

Tại sao lại ÍT?

Bootstrap được tạo ra với LESS làm cốt lõi của nó, một ngôn ngữ biểu định kiểu động được tạo ra bởi người bạn tốt của chúng tôi, Alexis Sellier . Nó làm cho việc phát triển CSS dựa trên hệ thống nhanh hơn, dễ dàng hơn và thú vị hơn.

Bao gồm những gì?

Là một phần mở rộng của CSS, LESS bao gồm các biến, mixin cho các đoạn mã có thể tái sử dụng, các phép toán cho phép toán đơn giản, lồng và thậm chí cả các hàm màu.

Tìm hiểu thêm

ÍT CSS

Truy cập trang web chính thức tại http://lesscss.org/ để tìm hiểu thêm.

Biến

Việc quản lý màu sắc và giá trị pixel trong CSS có thể hơi khó khăn, thường chỉ cần sao chép và dán. Tuy nhiên, không phải với LESS — chỉ định màu sắc hoặc giá trị pixel làm biến và thay đổi chúng một lần.

Mixin

Ba khai báo bán kính đường viền mà bạn cần phải thực hiện trong CSS thông thường? Giờ đây, chúng thành một dòng với sự trợ giúp của các mixin, các đoạn mã bạn có thể sử dụng lại ở bất cứ đâu.

Hoạt động

Làm cho lưới của bạn, hàng đầu và siêu linh hoạt hơn bằng cách thực hiện phép toán một cách nhanh chóng với các phép toán. Nhân, chia, cộng và trừ theo cách của bạn cho sự tỉnh táo của CSS.

Giàn giáo và liên kết

@bodyBackground @white Màu nền của trang
@textColor @grayDark Màu văn bản mặc định cho toàn bộ nội dung, tiêu đề, v.v.
@linkColor #08c Màu văn bản liên kết mặc định
@linkColorHover darken(@linkColor, 15%) Màu di chuột qua văn bản liên kết mặc định

Hệ thống lưới điện

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6,382978723%
@fluidGridGutterWidth 2,127659574%

Kiểu chữ

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Chuyển phát nhanh mới", monospace
@baseFontSize 13px Phải là pixel
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Phải là pixel
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Những cái bàn

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

Màu xám

@black # 000
@grayDarker # 222
@grayDark # 333
@gray # 555
@grayLight # 999
@grayLighter #eee
@white #fff

Màu nhấn

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

Các thành phần

nút

@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

Các hình thức

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

Trạng thái biểu mẫu và cảnh báo

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

Thanh điều hướng

@navbarHeight 40px
@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

Trình đơn thả xuống

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Đơn vị anh hùng

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Giới thiệu về mixin

Mixin cơ bản

Một mixin cơ bản về cơ bản là bao gồm hoặc một phần cho một đoạn CSS. Chúng được viết giống như một lớp CSS và có thể được gọi ở bất kỳ đâu.

  1. . phần tử {
  2. . clearfix ();
  3. }

Mixin tham số

Một mixin tham số giống như một mixin cơ bản, nhưng nó cũng chấp nhận các tham số (do đó có tên) với các giá trị mặc định tùy chọn.

  1. . phần tử {
  2. . viền - bán kính ( 4px );
  3. }

Dễ dàng thêm của riêng bạn

Gần như tất cả các mixin của Bootstrap đều được lưu trữ trong mixins.less, một tệp .less tiện ích tuyệt vời cho phép bạn sử dụng mixin trong bất kỳ tệp .less nào trong bộ công cụ.

Vì vậy, hãy tiếp tục và sử dụng những cái hiện có hoặc thoải mái thêm cái của riêng bạn khi bạn cần.

Mixin bao gồm

Tiện ích

Mixin Thông số Cách sử dụng
.clearfix() không ai Thêm vào bất kỳ phụ huynh nào để xóa các phao bên trong
.tab-focus() không ai Áp dụng kiểu tiêu điểm Webkit và làm tròn đường viền Firefox
.center-block() không ai Tự động căn giữa một phần tử cấp khối bằng cách sử dụngmargin: auto
.ie7-inline-block() không ai Sử dụng ngoài việc thông thường display: inline-blockđể được hỗ trợ IE7
.size() @height @width Đặt nhanh chiều cao và chiều rộng trên một dòng
.square() @size Xây dựng trên .size()để đặt chiều rộng và chiều cao bằng cùng một giá trị
.opacity() @opacity Đặt phần trăm độ mờ theo số nguyên (ví dụ: "50" hoặc "75")

Các hình thức

Mixin Thông số Cách sử dụng
.placeholder() @color: @placeholderText Đặt placeholdermàu văn bản cho đầu vào

Kiểu chữ

Mixin Thông số Cách sử dụng
#font > #family > .serif() không ai Tạo một phần tử bằng cách sử dụng ngăn xếp phông chữ serif
#font > #family > .sans-serif() không ai Tạo một phần tử bằng cách sử dụng ngăn xếp phông chữ sans-serif
#font > #family > .monospace() không ai Tạo một phần tử bằng cách sử dụng ngăn xếp phông chữ monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Dễ dàng đặt kích thước, trọng lượng và hàng đầu phông chữ
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Đặt họ phông chữ thành serif và kiểm soát kích thước, trọng lượng và hàng đầu
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Đặt họ phông chữ thành sans-serif và kiểm soát kích thước, trọng lượng và hàng đầu
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Đặt họ phông chữ thành monospace và kiểm soát kích thước, trọng lượng và hàng đầu

Hệ thống lưới điện

Mixin Thông số Cách sử dụng
.container-fixed() không ai Tạo một vùng chứa căn giữa theo chiều ngang để chứa nội dung của bạn
#grid > .core() @gridColumnWidth, @gridGutterWidth Tạo hệ thống lưới pixel (vùng chứa, hàng và cột) với n cột và rãnh x pixel rộng
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Tạo hệ thống lưới phần trăm với n cột và rãnh x % rộng
#grid > .input() @gridColumnWidth, @gridGutterWidth Tạo hệ thống lưới pixel cho inputcác phần tử, tính đến phần đệm và đường viền
.makeColumn @columns: 1, @offset: 0 Biến bất kỳ divthành cột lưới mà không có các .span*lớp

Thuộc tính CSS3

Mixin Thông số Cách sử dụng
.border-radius() @radius Làm tròn các góc của một phần tử. Có thể là một giá trị duy nhất hoặc bốn giá trị được phân tách bằng dấu cách
.box-shadow() @shadow Thêm bóng đổ vào một phần tử
.transition() @transition Thêm hiệu ứng chuyển tiếp CSS3 (ví dụ all .2s linear:)
.rotate() @degrees Xoay một phần tử n độ
.scale() @ratio Chia tỷ lệ một phần tử thành n lần kích thước ban đầu của nó
.translate() @x, @y Di chuyển một phần tử trên mặt phẳng x và y
.background-clip() @clip Cắt nền của một phần tử (hữu ích cho border-radius)
.background-size() @size Kiểm soát kích thước của hình nền thông qua CSS3
.box-sizing() @boxmodel Thay đổi mô hình hộp cho một phần tử (ví dụ: border-boxcho toàn chiều rộng input)
.user-select() @select Kiểm soát lựa chọn con trỏ của văn bản trên một trang
.backface-visibility() @visibility: visible Ngăn nội dung nhấp nháy khi sử dụng các chuyển đổi 3D CSS
.resizable() @direction: both Làm cho bất kỳ phần tử nào có thể thay đổi kích thước ở bên phải và dưới cùng
.content-columns() @columnCount, @columnGap: @gridGutterWidth Làm cho nội dung của bất kỳ phần tử nào sử dụng các cột CSS3
.hyphens() @mode: auto Dấu gạch nối CSS3 khi bạn muốn (bao gồm word-wrap: break-word)

Nền và độ dốc

Mixin Thông số Cách sử dụng
#translucent > .background() @color: @white, @alpha: 1 Tạo màu nền mờ cho một phần tử
#translucent > .border() @color: @white, @alpha: 1 Cung cấp cho một phần tử màu đường viền mờ
#gradient > .vertical() @startColor, @endColor Tạo gradient nền dọc trên nhiều trình duyệt
#gradient > .horizontal() @startColor, @endColor Tạo gradient nền ngang trên nhiều trình duyệt
#gradient > .directional() @startColor, @endColor, @deg Tạo gradient nền định hướng trên nhiều trình duyệt
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Tạo gradient nền ba màu trên nhiều trình duyệt
#gradient > .radial() @innerColor, @outerColor Tạo gradient nền xuyên tâm trên nhiều trình duyệt
#gradient > .striped() @color, @angle Tạo gradient nền sọc trên nhiều trình duyệt
#gradientBar() @primaryColor, @secondaryColor Được sử dụng cho các nút để chỉ định một đường viền gradient và tối hơn một chút
Lưu ý: Nếu bạn đang gửi yêu cầu kéo tới GitHub với CSS đã sửa đổi, bạn phải biên dịch lại CSS thông qua bất kỳ phương pháp nào trong số này.

Công cụ để biên dịch

Nút với makefile

Cài đặt trình biên dịch dòng lệnh LESS, JSHint, Recess và uglify-js trên toàn cầu với npm bằng cách chạy lệnh sau:

$ npm install -g bớt jshint giải lao uglify-js

Sau khi cài đặt, chỉ cần chạy maketừ thư mục gốc của thư mục bootstrap của bạn và bạn đã hoàn tất.

Ngoài ra, nếu bạn đã cài đặt watchr , bạn có thể chạy make watchđể bootstrap tự động xây dựng lại mỗi khi bạn chỉnh sửa tệp trong bootstrap lib (điều này không bắt buộc, chỉ là một phương pháp tiện lợi).

Dòng lệnh

Cài đặt công cụ dòng lệnh LESS qua Node và chạy lệnh sau:

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

Hãy chắc chắn bao gồm --compresstrong lệnh đó nếu bạn đang cố gắng tiết kiệm một số byte!

Javascript

Tải xuống Less.js mới nhất và bao gồm đường dẫn đến nó (và Bootstrap) trong <head>.

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

Để biên dịch lại các tệp .less, chỉ cần lưu chúng và tải lại trang của bạn. Less.js biên dịch chúng và lưu trữ trong bộ nhớ cục bộ.

Ứng dụng Mac không chính thức

Ứng dụng Mac không chính thức xem thư mục của các tệp .less và biên dịch mã thành các tệp cục bộ sau mỗi lần lưu tệp .less đã xem.

Nếu muốn, bạn có thể chuyển đổi các tùy chọn trong ứng dụng để thu nhỏ tự động và thư mục nào mà các tệp đã biên dịch kết thúc.

Các ứng dụng Mac khác

Crunch

Crunch là một trình soạn thảo và biên dịch LESS tuyệt vời được xây dựng trên Adobe Air.

CodeKit

Được tạo bởi cùng một người như ứng dụng Mac không chính thức, CodeKit là một ứng dụng Mac có thể biên dịch LESS, SASS, Stylus và CoffeeScript.

Đơn giản

Ứng dụng Mac, Linux và PC để kéo và thả biên dịch các tệp LESS. Thêm vào đó, mã nguồn nằm trên GitHub .