ការប្រើប្រាស់ LESS ជាមួយ Bootstrap

ប្ដូរតាមបំណង និងពង្រីក Bootstrap ជាមួយ LESS ដែលជាកម្មវិធីដំណើរការមុនរបស់ CSS ដើម្បីទាញយកអត្ថប្រយោជន៍ពីអថេរ mixins និងជាច្រើនទៀតដែលត្រូវបានប្រើដើម្បីបង្កើត CSS របស់ Bootstrap ។

ហេតុអ្វី LESS?

Bootstrap ត្រូវបានបង្កើតឡើងដោយប្រើ LESS ជាស្នូលរបស់វា ជាភាសារចនាប័ទ្មថាមវន្តដែលបង្កើតដោយមិត្តល្អរបស់យើង Alexis Sellier ។ វាធ្វើឱ្យការបង្កើត CSS ផ្អែកលើប្រព័ន្ធកាន់តែលឿន ងាយស្រួល និងរីករាយជាងមុន។

រួមបញ្ចូលអ្វីខ្លះ?

ក្នុងនាមជាផ្នែកបន្ថែមនៃ CSS, LESS រួមបញ្ចូលអថេរ, mixins សម្រាប់ព័ត៌មានខ្លីៗនៃកូដដែលអាចប្រើឡើងវិញបាន ប្រតិបត្តិការសម្រាប់គណិតវិទ្យាសាមញ្ញ ការដាក់សំបុក និងសូម្បីតែមុខងារពណ៌។

ស្វែងយល់បន្ថែម

សូមចូលមើលគេហទំព័រផ្លូវការនៅ http://lesscss.org/ ដើម្បីស្វែងយល់បន្ថែម។

អថេរ

ការគ្រប់គ្រងពណ៌ និងតម្លៃភីកសែលនៅក្នុង CSS អាចជាការឈឺចាប់បន្តិច ដែលជាធម្មតាពោរពេញទៅដោយការចម្លង និងបិទភ្ជាប់។ មិនមែនជាមួយ LESS ទេ—កំណត់ពណ៌ ឬតម្លៃភីកសែលជាអថេរ ហើយប្តូរវាម្តង។

ល្បាយ

ការប្រកាសកាំព្រំដែនទាំងបីដែលអ្នកត្រូវធ្វើក្នុង CSS ធម្មតា? ឥឡូវនេះ ពួកវាធ្លាក់ដល់មួយជួរ ដោយមានជំនួយពី mixins អត្ថបទខ្លីៗនៃកូដដែលអ្នកអាចប្រើឡើងវិញបានគ្រប់ទីកន្លែង។

ប្រតិបត្តិការ

ធ្វើឱ្យក្រឡាចត្រង្គរបស់អ្នក ឈានមុខគេ និងមានភាពបត់បែនខ្លាំងជាងមុន ដោយធ្វើគណិតវិទ្យាភ្លាមៗជាមួយនឹងប្រតិបត្តិការ។ គុណ ចែក បន្ថែម និងដកវិធីរបស់អ្នកទៅ CSS sanity ។

រន្ទានិងតំណភ្ជាប់

`@bodyBackground`	`@white`	ពណ៌ផ្ទៃខាងក្រោយទំព័រ
`@textColor`	`@grayDark`	ពណ៌អត្ថបទលំនាំដើមសម្រាប់តួទាំងមូល ក្បាល និងច្រើនទៀត។
`@linkColor`	`#08c`	ពណ៌អត្ថបទតំណលំនាំដើម
`@linkColorHover`	`darken(@linkColor, 15%)`	ពណ៌អត្ថបទតំណលំនាំដើម

ប្រព័ន្ធក្រឡាចត្រង្គ

`@gridColumns`	១២
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

វាយអក្សរ

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	ត្រូវតែជាភីកសែល
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	ត្រូវតែជាភីកសែល
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

តុ

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

មាត្រដ្ឋានប្រផេះ

`@black`	#០០០
`@grayDarker`	#២២២
`@grayDark`	#៣៣៣
`@gray`	# 555
`@grayLight`	#៩៩៩
`@grayLighter`	#អេ
`@white`	#fff

ពណ៌សង្កត់សំឡេង

`@blue`	# ០៤៩ ស៊ីឌីប៊ី
`@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`	#៤៦៨៨៤៧
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@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`

ទម្លាក់ចុះ

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

ឯកតាវីរបុរស

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

អំពីល្បាយ

ល្បាយមូលដ្ឋាន

mixin មូលដ្ឋានគឺសំខាន់ជារួមបញ្ចូល ឬផ្នែកមួយសម្រាប់ CSS ។ ពួកវាត្រូវបានសរសេរដូចជាថ្នាក់ CSS ហើយអាចហៅបានគ្រប់ទីកន្លែង។

. ធាតុ {
  . clearfix ();
}

ល្បាយប៉ារ៉ាម៉ែត្រ

parametric mixin គឺដូចជា mixin មូលដ្ឋាន ប៉ុន្តែវាក៏ទទួលយកប៉ារ៉ាម៉ែត្រ (ហេតុនេះឈ្មោះ) ជាមួយនឹងតម្លៃលំនាំដើមស្រេចចិត្ត។

. ធាតុ {
  . ព្រំដែន - កាំ ( 4px );
}

ងាយស្រួលបន្ថែមផ្ទាល់ខ្លួនរបស់អ្នក។

ស្ទើរតែទាំងអស់នៃ mixins របស់ Bootstrap ត្រូវបានរក្សាទុកនៅក្នុង mixins.less ដែលជាឯកសារ .less ដ៏អស្ចារ្យដែលអាចឱ្យអ្នកអាចប្រើ mixin នៅក្នុងឯកសារ .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()`	គ្មាន	បង្កើតធាតុមួយដោយប្រើជង់ពុម្ពអក្សរ serif
`#font > #family > .sans-serif()`	គ្មាន	បង្កើតធាតុមួយដោយប្រើជង់ពុម្ពអក្សរ sans-serif
`#font > #family > .monospace()`	គ្មាន	បង្កើតធាតុមួយដោយប្រើជង់ពុម្ពអក្សរ 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`	កំណត់គ្រួសារពុម្ពអក្សរទៅជា monospace និងគ្រប់គ្រងទំហំ ទម្ងន់ និងនាំមុខ

ប្រព័ន្ធក្រឡាចត្រង្គ

លាយ	ប៉ារ៉ាម៉ែត្រ	ការប្រើប្រាស់
`.container-fixed()`	គ្មាន	បង្កើតកុងតឺន័រដែលស្ថិតនៅកណ្តាលផ្តេកសម្រាប់ផ្ទុកមាតិការបស់អ្នក។
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	បង្កើតប្រព័ន្ធក្រឡាចត្រង្គភីកសែល (កុងតឺន័រ ជួរដេក និងជួរឈរ) ដែលមាន ជួរឈរ n និង x ភីកសែល លូទឹកធំទូលាយ
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	បង្កើតប្រព័ន្ធក្រឡាចត្រង្គភាគរយជាមួយ ជួរឈរ n និង x % gutter ធំទូលាយ
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	បង្កើតប្រព័ន្ធក្រឡាចត្រង្គភីកសែលសម្រាប់ `input`ធាតុ គណនេយ្យសម្រាប់ទ្រនាប់ និងស៊ុម
`.makeColumn`	`@columns: 1, @offset: 0`	បង្វែរណាមួយ `div`ទៅជាជួរឈរក្រឡាចត្រង្គដោយគ្មាន `.span*`ថ្នាក់

លក្ខណៈសម្បត្តិ CSS3

លាយ	ប៉ារ៉ាម៉ែត្រ	ការប្រើប្រាស់
`.border-radius()`	`@radius`	បង្គត់ជ្រុងនៃធាតុមួយ។ អាចជាតម្លៃមួយ ឬតម្លៃបំបែកចន្លោះបួន
`.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`	បង្កើតជម្រាលផ្ទៃខាងក្រោយបីពណ៌ឆ្លងកាត់កម្មវិធីរុករក
`#gradient > .radial()`	`@innerColor, @outerColor`	បង្កើតជម្រាលផ្ទៃខាងក្រោយរ៉ាឌីកាល់ឆ្លងកម្មវិធីរុករក
`#gradient > .striped()`	`@color, @angle`	បង្កើតជម្រាលផ្ទៃខាងក្រោយឆ្នូតឆ្លងកម្មវិធីរុករក
`#gradientBar()`	`@primaryColor, @secondaryColor`	ប្រើសម្រាប់ប៊ូតុងដើម្បីកំណត់ជម្រាល និងស៊ុមងងឹតបន្តិច

ចំណាំ៖ ប្រសិនបើអ្នកកំពុងដាក់សំណើរទាញទៅកាន់ GitHub ជាមួយនឹង CSS ដែលបានកែប្រែ អ្នក ត្រូវតែ ចងក្រង CSS ឡើងវិញតាមរយៈវិធីសាស្រ្តទាំងនេះ។

ឧបករណ៍សម្រាប់ការចងក្រង

ថ្នាំងជាមួយ makefile

ដំឡើងកម្មវិធីចងក្រងបន្ទាត់ពាក្យបញ្ជា LESS JSHint, Recess និង uglify-js ជាសកលជាមួយ npm ដោយដំណើរការពាក្យបញ្ជាខាងក្រោម៖

$ npm ដំឡើង -g តិច jshint recess uglify-js

នៅពេលដំឡើងរួច គ្រាន់តែដំណើរការ makeពី root នៃ bootstrap directory របស់អ្នក ហើយអ្នករួចរាល់ហើយ។

លើសពីនេះ ប្រសិនបើអ្នកបាន ដំឡើង watchr អ្នកអាចដំណើរការ make watchដើម្បីឱ្យ bootstrap បង្កើតឡើងវិញដោយស្វ័យប្រវត្តិរាល់ពេលដែលអ្នកកែសម្រួលឯកសារនៅក្នុង bootstrap lib (នេះមិនទាមទារទេ គ្រាន់តែជាវិធីសាស្ត្រងាយស្រួលប៉ុណ្ណោះ)។

បន្ទាត់ពាក្យបញ្ជា

ដំឡើងឧបករណ៍បន្ទាត់ពាក្យបញ្ជា LESS តាមរយៈ Node ហើយដំណើរការពាក្យបញ្ជាខាងក្រោម៖

$ lessc ./less/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 ដែលបានមើល។

ប្រសិនបើអ្នកចូលចិត្ត អ្នកអាចបិទបើកចំណូលចិត្តនៅក្នុងកម្មវិធីសម្រាប់ការបង្រួមតូចដោយស្វ័យប្រវត្តិ ហើយថតឯកសារណាដែលចងក្រងនឹងបញ្ចប់។

សាងសង់ដោយ LESS

ហេតុអ្វី LESS?

រួមបញ្ចូលអ្វីខ្លះ?

ស្វែង​យល់​បន្ថែម

អថេរ

ល្បាយ

ប្រតិបត្តិការ

អថេរ Bootstrap អថេរ LESS តម្លៃរបស់វា និងការណែនាំអំពីការប្រើប្រាស់

រន្ទានិងតំណភ្ជាប់

ប្រព័ន្ធក្រឡាចត្រង្គ

វាយអក្សរ

តុ

មាត្រដ្ឋានប្រផេះ

ពណ៌សង្កត់សំឡេង

សមាសធាតុ

ប៊ូតុង

ទម្រង់

ទម្រង់រដ្ឋ និងការជូនដំណឹង

Navbar

ទម្លាក់ចុះ

ឯកតាវីរបុរស

ល្បាយ Bootstrap

អំពីល្បាយ

ល្បាយមូលដ្ឋាន

ល្បាយប៉ារ៉ាម៉ែត្រ

ងាយស្រួលបន្ថែមផ្ទាល់ខ្លួនរបស់អ្នក។

លាយបញ្ចូលគ្នា

ឧបករណ៍ប្រើប្រាស់

ទម្រង់

វាយអក្សរ

ប្រព័ន្ធក្រឡាចត្រង្គ

លក្ខណៈសម្បត្តិ CSS3

ផ្ទៃខាងក្រោយ និងជម្រាល

ការចងក្រង Bootstrap ជាមួយ LESS

ឧបករណ៍សម្រាប់ការចងក្រង

ថ្នាំងជាមួយ makefile

បន្ទាត់ពាក្យបញ្ជា

Javascript

កម្មវិធី Mac មិនផ្លូវការ

កម្មវិធី Mac ច្រើនទៀត

បុក

កូដឃីត

សាមញ្ញ

ស្វែងយល់បន្ថែម