ใช้น้อยกับ Bootstrap
ปรับแต่งและขยาย Bootstrap ด้วยLESSซึ่งเป็นตัวประมวลผลล่วงหน้าของ CSS เพื่อใช้ประโยชน์จากตัวแปร มิกซ์อิน และอื่นๆ ที่ใช้สร้าง CSS ของ Bootstrap
สร้างด้วย LESS
ทำไมน้อย?
Bootstrap สร้างขึ้นโดยใช้ LESS เป็นหลัก ซึ่งเป็นภาษาสไตล์ชีตแบบไดนามิกที่สร้างโดยAlexis Sellier เพื่อนที่ดี ของ เรา มันทำให้การพัฒนา CSS ตามระบบเร็วขึ้น ง่ายขึ้น และสนุกมากขึ้น
รวมอะไรบ้าง?
LESS เป็นส่วนขยายของ CSS ประกอบด้วยตัวแปร มิกซ์อินสำหรับตัวอย่างโค้ดที่นำกลับมาใช้ใหม่ การดำเนินการสำหรับฟังก์ชันคณิตศาสตร์อย่างง่าย การซ้อน และแม้แต่ฟังก์ชันสี
ตัวแปร
การจัดการสีและค่าพิกเซลใน CSS อาจเป็นเรื่องยุ่งยาก ซึ่งมักจะเต็มไปด้วยการคัดลอกและวาง ไม่ใช่น้อยแต่กำหนดสีหรือค่าพิกเซลเป็นตัวแปรและเปลี่ยนครั้งเดียว
มิกซ์อิน
การประกาศรัศมีเส้นขอบทั้งสามนั้นที่คุณต้องทำใน CSS แบบปกติ? ตอนนี้มันเหลือบรรทัดเดียวด้วยความช่วยเหลือของมิกซ์อิน ตัวอย่างโค้ดที่คุณนำกลับมาใช้ใหม่ได้ทุกที่
ปฏิบัติการ
ทำให้กริดของคุณ เป็นผู้นำ และมีความยืดหยุ่นสูงสุดโดยการคำนวณทันทีด้วยการดำเนินการ ทวีคูณ หาร เพิ่มและลบวิธีการของคุณสู่ความสมเหตุสมผลของ CSS
ตัวแปร Bootstrap ตัวแปรLESS ค่าและแนวทางการใช้งาน
ไฮเปอร์ลิงก์
@linkColor |
#08c | สีข้อความลิงก์เริ่มต้น | |
@linkColorHover |
darken(@linkColor, 15%) |
สีของข้อความลิงก์เริ่มต้นโฮเวอร์ |
ระบบกริด
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
วิชาการพิมพ์
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
สีเทา
@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 |
ส่วนประกอบ
ปุ่ม
@primaryButtonBackground |
@linkColor |
แบบฟอร์ม
@placeholderText |
@grayLight |
แถบนำทาง
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
แบบฟอร์มสถานะและการแจ้งเตือน
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap มิกซ์อิน
เกี่ยวกับมิกซ์อิน
ส่วนผสมพื้นฐาน
มิกซ์อินพื้นฐานนั้นเป็นการรวมหรือบางส่วนสำหรับตัวอย่าง CSS มันเขียนเหมือนกับคลาส CSS และสามารถเรียกได้ทุกที่
- . องค์ประกอบ{
- . clearfix ();
- }
พาราเมตริกมิกซ์อิน
Parametric mixin เหมือนกับมิกซ์อินพื้นฐาน แต่ยังยอมรับพารามิเตอร์ (ด้วยเหตุนี้ชื่อ) ด้วยค่าเริ่มต้นที่เลือกได้
- . องค์ประกอบ{
- . เส้นขอบ- รัศมี( 4px );
- }
เพิ่มของคุณเองได้อย่างง่ายดาย
มิกซ์อินของ Bootstrap เกือบทั้งหมดถูกเก็บไว้ใน mixins.less ซึ่งเป็นไฟล์ยูทิลิตี้ .less ที่ยอดเยี่ยม ซึ่งช่วยให้คุณใช้มิกซ์อินในไฟล์ .less ใดๆ ในชุดเครื่องมือได้
ดังนั้นไปข้างหน้าและใช้สิ่งที่มีอยู่หรือเพิ่มของคุณเองตามที่คุณต้องการ
รวมมิกซ์อิน
สาธารณูปโภค
| มิกซ์ซิน | พารามิเตอร์ | การใช้งาน |
|---|---|---|
.clearfix() |
ไม่มี | เพิ่มไปยังผู้ปกครองเพื่อล้างโฟลตภายใน |
.tab-focus() |
ไม่มี | ใช้รูปแบบโฟกัสของ Webkit และโครงร่าง Firefox แบบกลม |
.center-block() |
ไม่มี | จัดองค์ประกอบระดับบล็อกโดยอัตโนมัติโดยใช้margin: auto |
.ie7-inline-block() |
ไม่มี | ใช้นอกเหนือจากปกติdisplay: inline-blockเพื่อรับการสนับสนุน IE7 |
.size() |
@height: 5px, @width: 5px |
กำหนดความสูงและความกว้างอย่างรวดเร็วในบรรทัดเดียว |
.square() |
@size: 5px |
สร้างบน.size()เพื่อกำหนดความกว้างและความสูงเป็นค่าเดียวกัน |
.opacity() |
@opacity: 100 |
กำหนดเปอร์เซ็นต์ความทึบในจำนวนเต็ม (เช่น "50" หรือ "75") |
แบบฟอร์ม
| มิกซ์ซิน | พารามิเตอร์ | การใช้งาน |
|---|---|---|
.placeholder() |
@color: @placeholderText |
กำหนดplaceholderสีข้อความสำหรับอินพุต |
วิชาการพิมพ์
| มิกซ์ซิน | พารามิเตอร์ | การใช้งาน |
|---|---|---|
#font > #family > .serif() |
ไม่มี | ทำให้องค์ประกอบใช้กองแบบอักษร 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() |
ไม่มี | จัดเตรียมคอนเทนเนอร์ความกว้างคงที่ (ตั้งค่าด้วย@siteWidth) สำหรับเก็บเนื้อหาของคุณ |
.columns() |
@columns: 1 |
สร้างคอลัมน์กริดที่ครอบคลุมคอลัมน์จำนวนเท่าใดก็ได้ (ค่าเริ่มต้นคือ 1 คอลัมน์) |
.offset() |
@columns: 1 |
ออฟเซ็ตคอลัมน์กริดที่มีระยะขอบด้านซ้ายที่ครอบคลุมคอลัมน์จำนวนเท่าใดก็ได้ |
.gridColumn() |
ไม่มี | ทำให้องค์ประกอบลอยเหมือนคอลัมน์กริด |
คุณสมบัติ CSS3
| มิกซ์ซิน | พารามิเตอร์ | การใช้งาน |
|---|---|---|
.border-radius() |
@radius: 5px |
ปัดเศษมุมขององค์ประกอบ สามารถเป็นค่าเดียวหรือสี่ค่าที่คั่นด้วยช่องว่าง |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
เพิ่มเงาให้กับองค์ประกอบ |
.transition() |
@transition |
เพิ่มเอฟเฟกต์การเปลี่ยน CSS3 (เช่นall .2s linear) |
.rotate() |
@degrees |
หมุนองค์ประกอบnองศา |
.scale() |
@ratio |
ปรับขนาดองค์ประกอบเป็นnเท่าของขนาดดั้งเดิม |
.translate() |
@x: 0, @y: 0 |
ย้ายองค์ประกอบบนระนาบ x และ y |
.background-clip() |
@clip |
ครอบตัดพื้นหลังขององค์ประกอบ (มีประโยชน์สำหรับborder-radius) |
.background-size() |
@size |
ควบคุมขนาดของภาพพื้นหลังผ่าน CSS3 |
.box-sizing() |
@boxmodel |
เปลี่ยนโมเดลกล่องสำหรับองค์ประกอบ (เช่นborder-boxสำหรับ full-width input) |
.user-select() |
@select |
ควบคุมการเลือกเคอร์เซอร์ของข้อความบนหน้า |
.resizable() |
@direction: both |
ทำให้องค์ประกอบใด ๆ ปรับขนาดได้ทางด้านขวาและด้านล่าง |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ทำให้เนื้อหาขององค์ประกอบใด ๆ ใช้คอลัมน์ 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 |
สร้างการไล่ระดับสีพื้นหลังสามสีข้ามเบราว์เซอร์ |
.#gradient > .radial() |
@innerColor, @outerColor |
สร้างการไล่ระดับสีพื้นหลังเรเดียลข้ามเบราว์เซอร์ |
.#gradient > .striped() |
@color, @angle |
สร้างการไล่ระดับสีพื้นหลังลายทางข้ามเบราว์เซอร์ |
.#gradientBar() |
@primaryColor, @secondaryColor |
ใช้สำหรับปุ่มเพื่อกำหนดการไล่ระดับสีและเส้นขอบที่เข้มขึ้นเล็กน้อย |
รวบรวม Bootstrap ด้วย LESS
เครื่องมือสำหรับการคอมไพล์
โหนดด้วย makefile
ติดตั้งคอมไพเลอร์บรรทัดคำสั่ง LESS ด้วย npm โดยรันคำสั่งต่อไปนี้:
$ npm ติดตั้งน้อยลง
เมื่อติดตั้งแล้ว ให้เรียกใช้makeจากรูทของไดเร็กทอรีบูตสแตรปของคุณ เท่านี้คุณก็พร้อมแล้ว
นอกจากนี้ หากคุณได้ ติดตั้ง watchrไว้ คุณอาจเรียกใช้make watchเพื่อให้ bootstrap สร้างใหม่โดยอัตโนมัติทุกครั้งที่คุณแก้ไขไฟล์ใน bootstrap lib (ไม่จำเป็น เพียงเป็นวิธีที่สะดวก)
บรรทัดคำสั่ง
ติดตั้งเครื่องมือบรรทัดคำสั่ง LESS ผ่าน Node และเรียกใช้คำสั่งต่อไปนี้:
$ lessc ./lib/bootstrap.less > bootstrap.css
อย่าลืมรวม--compressไว้ในคำสั่งนั้นหากคุณพยายามบันทึกบางไบต์!
Javascript
ดาวน์โหลด Less.js ล่าสุดและรวมพา ธ ไปที่มัน (และ Bootstrap) ในไฟล์<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 เป็นโปรแกรมแก้ไขและคอมไพเลอร์ LESS ที่ดูดีซึ่งสร้างจาก Adobe Air
CodeKit
CodeKit เป็นแอป Mac ที่รวบรวม LESS, SASS, Stylus และ CoffeeScript โดยคนคนเดียวกับแอป Mac ที่ไม่เป็นทางการ
ความเรียบง่าย
แอพ Mac, Linux และ PC สำหรับการลากและวางการรวบรวมไฟล์ LESS นอกจากนี้ซอร์สโค้ดยังอยู่บน GitHub