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

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

ហេតុអ្វី LESS?

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

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

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

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

CSS តិច

សូមចូលមើលគេហទំព័រផ្លូវការនៅ 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 ហើយអាចហៅបានគ្រប់ទីកន្លែង។

  1. . ធាតុ {
  2. . clearfix ();
  3. }

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

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

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

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

ស្ទើរតែទាំងអស់នៃ 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 ដែលបានមើល។

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

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

បុក

Crunch គឺជាកម្មវិធីនិពន្ធ និងកម្មវិធីចងក្រងដែលមើលទៅមិនសូវល្អដែលបង្កើតឡើងនៅលើ Adobe Air។

កូដឃីត

បង្កើតឡើងដោយបុរសដូចគ្នាទៅនឹងកម្មវិធី Mac ក្រៅផ្លូវការ CodeKit គឺជាកម្មវិធី Mac ដែលចងក្រង LESS, SASS, Stylus និង CoffeeScript ។

សាមញ្ញ

កម្មវិធី Mac, Linux និង PC សម្រាប់អូស និងទម្លាក់ការចងក្រងឯកសារ LESS ។ លើសពីនេះ កូដប្រភពគឺនៅលើ GitHub