Bootstrap ဖြင့် LESS အသုံးပြုခြင်း။

Bootstrap ၏ CSS ကိုတည်ဆောက်ရာတွင် အသုံးပြုသည့် variables များ၊ mixins များနှင့် အခြားအရာများကို အခွင့်ကောင်းယူရန် LESS ၊ CSS preprocessor ဖြင့် Bootstrap ကို စိတ်ကြိုက်ချဲ့ပြီး တိုးချဲ့ ပါ။

အဘယ်ကြောင့်နည်း။

Bootstrap သည် ကျွန်ုပ်တို့၏မိတ်ဆွေကောင်း Alexis Sellier မှ ဖန်တီးထားသော Dynamic Style Sheet ဘာသာစကားတစ်ခုဖြစ်ပြီး ၎င်း၏အဓိကအားဖြင့် LESS ဖြင့်ပြုလုပ်ထားသည် ။ ၎င်းသည် စနစ်အခြေခံ CSS ကို ပိုမိုမြန်ဆန်၊ ပိုမိုလွယ်ကူစေပြီး ပိုမိုပျော်စရာကောင်းစေသည်။

ဘာတွေပါဝင်လဲ?

CSS ၏ နောက်ဆက်တွဲအနေဖြင့် LESS တွင် ကိန်းရှင်များ၊ ရောစပ်ထားသော ကုဒ်အတိုအထွာများ၊ ရိုးရှင်းသောသင်္ချာအတွက် လုပ်ဆောင်ချက်များ၊ nesting နှင့် အရောင်လုပ်ဆောင်ချက်များပင် ပါဝင်ပါသည်။

ပိုမိုသိရှိရန်

ပိုမိုလေ့လာသင်ယူရန် http://lesscss.org/ ရှိတရားဝင်ဝဘ်ဆိုဒ်သို့ဝင်ရောက် ပါ။

ကိန်းရှင်များ

CSS ရှိ အရောင်များနှင့် pixel တန်ဖိုးများကို စီမံခန့်ခွဲခြင်းသည် အနည်းငယ် နာကျင်နိုင်ပြီး များသောအားဖြင့် ကော်ပီနှင့် ကူးထည့်ခြင်းများဖြင့် ပြည့်နေပါသည်။ LESS ဖြင့်မဟုတ်ပါ—အရောင်များ သို့မဟုတ် pixel တန်ဖိုးများကို ကိန်းရှင်များအဖြစ် သတ်မှတ်ပြီး ၎င်းတို့ကို တစ်ကြိမ်ပြောင်းပါ။

Mixins

အဆိုပါ နယ်စပ်-အချင်းဝက် ကြေငြာချက် သုံးခုကို ပုံမှန် ol' CSS တွင် ပြုလုပ်ရန် လိုအပ်ပါသလား။ ယခု ၎င်းတို့သည် သင်ဘယ်နေရာမှာမဆို ပြန်သုံးနိုင်သော ကုဒ်အတိုအထွာများ Mixins ၏အကူအညီဖြင့် တစ်ကြောင်းတည်းသို့ ရောက်ရှိသွားပါပြီ။

စစ်ဆင်ရေး

လည်ပတ်မှုများဖြင့် သင်္ချာကို အလျင်အမြန်လုပ်ဆောင်ခြင်းဖြင့် သင်၏ဇယားကွက်၊ ဦးဆောင်မှုနှင့် ပိုမိုစူပါပြောင်းလွယ်ပြင်လွယ်ဖြစ်စေပါ။ သင့်နည်းလမ်းကို CSS sanity သို့ ပေါင်းခြင်း၊ ခွဲခြင်း၊ ထည့်ခြင်းနှင့် နုတ်ပါ။

ဟိုက်ပါလင့်ခ်များ

`@linkColor`	#08c	မူရင်းလင့်ခ် စာသားအရောင်
`@linkColorHover`	`darken(@linkColor, 15%)`	ပုံသေ လင့်ခ် စာသား အရောင်

ဂရစ်စနစ်

`@gridColumns`	၁၂
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	၆.၃၈၂၉၇၈၇၂၃ ရာခိုင်နှုန်း၊
`@fluidGridGutterWidth`	2.127659574%

စာစီစာရိုက်

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

မီးခိုးရောင်အရောင်များ

`@black`	#၀၀၀
`@grayDarker`	#၂၂၂
`@grayDark`	#၃၃၃
`@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`

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

ပြည်နယ်များနှင့် သတိပေးချက်များကို ဖွဲ့ပါ။

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#၄၆၈၈၄၇
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

mixins အကြောင်း

အခြေခံအရောအနှောများ

အခြေခံ mixin သည် အခြေခံအားဖြင့် CSS ၏ အတိုအထွာအတွက် ပါဝင်သည့် သို့မဟုတ် တစ်စိတ်တစ်ပိုင်းဖြစ်သည်။ ၎င်းတို့ကို CSS အတန်းကဲ့သို့ ရေးသားထားပြီး မည်သည့်နေရာတွင်မဆို ခေါ်နိုင်သည်။

. ဒြပ်စင် {
  . clearfix ();
}

Parametric mixins

parametric mixin သည် အခြေခံ mixin နှင့်တူသော်လည်း ၎င်းသည် သတ်မှတ်ချက်များကို (ထို့ကြောင့် အမည်) ကို ရွေးချယ်နိုင်သော ပုံသေတန်ဖိုးများဖြင့် လက်ခံပါသည်။

. ဒြပ်စင် {
  . နယ်စပ် - အချင်းဝက် ( 4px );
}

အလွယ်တကူ သင့်ကိုယ်ပိုင်ထည့်ပါ။

Bootstrap ၏ mixin များ အားလုံးနီးပါးကို mixins.less တွင် သိမ်းဆည်းထားပြီး toolkit အတွင်းရှိ .less ဖိုင်များထဲမှ မည်သည့် mixin ကိုမဆို အသုံးပြုနိုင်သည့် အံ့သြဖွယ်အသုံးဝင်သော .less ဖိုင်တစ်ခုဖြစ်သည်။

ထို့ကြောင့်၊ ရှိပြီးသားအရာများကိုသုံးပါ သို့မဟုတ် သင်လိုအပ်သလောက် သင့်ကိုယ်ပိုင်ထည့်ရန် အားမနာပါနှင့်။

ရောနှောပါဝင်ခြင်း။

အသုံးအဆောင်များ

Mixin	ကန့်သတ်ချက်များ	အသုံးပြုမှု
`.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")

ပုံစံများ

Mixin	ကန့်သတ်ချက်များ	အသုံးပြုမှု
`.placeholder()`	`@color: @placeholderText`	`placeholder`ထည့်သွင်းမှုအတွက် စာသားအရောင်ကို သတ်မှတ် ပါ။

စာစီစာရိုက်

Mixin	ကန့်သတ်ချက်များ	အသုံးပြုမှု
`#font > #family > .serif()`	မရှိ	ဒြပ်စင်တစ်ခုကို serif font stack ကိုသုံးပါ။
`#font > #family > .sans-serif()`	မရှိ	sans-serif font stack ကိုသုံး၍ element တစ်ခုကို ဖန်တီးပါ။
`#font > #family > .monospace()`	မရှိ	monospace font stack ကို အသုံးပြု၍ element တစ်ခုကို ဖန်တီးပါ။
`#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 အဖြစ် သတ်မှတ်ပြီး အရွယ်အစား၊ အလေးချိန်နှင့် ဦးဆောင်မှုကို ထိန်းချုပ်ပါ။

ဂရစ်စနစ်

Mixin	ကန့်သတ်ချက်များ	အသုံးပြုမှု
`.container-fixed()`	မရှိ	သင့်အကြောင်းအရာကို ကိုင်ဆောင်ရန်အတွက် အလျားလိုက်ဗဟိုပြုသော ကွန်တိန်နာတစ်ခု ဖန်တီးပါ။
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	n ကော်လံများနှင့် x pixel ကျယ်သော ရေမြောင်းများ ဖြင့် pixel grid စနစ် (ကွန်တိန်နာ၊ အတန်းနှင့် ကော်လံများ) ကို ဖန်တီးပါ
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	n ကော်လံများနှင့် x % ကျယ်သော ရေမြောင်းများဖြင့် ရှေ့ဂရစ်စနစ်တစ်ခုကို ဖန်တီးပါ။

CSS3 ဂုဏ်သတ္တိများ

Mixin	ကန့်သတ်ချက်များ	အသုံးပြုမှု
`.border-radius()`	`@radius: 5px`	ဒြပ်စင်တစ်ခု၏ ထောင့်များကို လှည့်ပါ။ တန်ဖိုးတစ်ခုတည်း သို့မဟုတ် နေရာခြားထားသော တန်ဖိုးလေးခု ဖြစ်နိုင်သည်။
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	ဒြပ်စင်တစ်ခုသို့ drop shadow တစ်ခုထည့်ပါ။
`.transition()`	`@transition`	CSS3 အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို ထည့်ပါ (ဥပမာ၊ `all .2s linear`)
`.rotate()`	`@degrees`	ဒြပ်စင် n ဒီဂရီ လှည့်
`.scale()`	`@ratio`	ဒြပ်စင်တစ်ခုအား ၎င်း၏ မူလအရွယ်အစားနှင့် အဆ ချိန်ညှိပါ ။
`.translate()`	`@x: 0, @y: 0`	x နှင့် y လေယာဉ်များပေါ်တွင် ဒြပ်စင်တစ်ခုကို ရွှေ့ပါ။
`.background-clip()`	`@clip`	ဒြပ်စင်တစ်ခု၏ နောက်ခံကို ဖြတ်တောက်ပါ (အတွက် အသုံးဝင်သည် `border-radius`)
`.background-size()`	`@size`	CSS3 မှတစ်ဆင့် နောက်ခံပုံများ၏ အရွယ်အစားကို ထိန်းချုပ်ပါ။
`.box-sizing()`	`@boxmodel`	ဒြပ်စင်တစ်ခုအတွက် အကွက်ပုံစံကို ပြောင်းပါ (ဥပမာ၊ `border-box`အကျယ်အပြည့်အစုံအတွက် `input`)
`.user-select()`	`@select`	စာမျက်နှာတစ်ခုပေါ်ရှိ စာသားရွေးချယ်မှုကို ထိန်းချုပ်ပါ။
`.resizable()`	`@direction: both`	ညာဘက်နှင့်အောက်ခြေရှိ မည်သည့်ဒြပ်စင်ကိုမဆို အရွယ်အစားပြောင်းနိုင်သည်။
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	မည်သည့်ဒြပ်စင်၏ အကြောင်းအရာကို CSS3 ကော်လံများကို အသုံးပြုပါ။

နောက်ခံများနှင့် gradients များ

Mixin	ကန့်သတ်ချက်များ	အသုံးပြုမှု
`#translucent > .background()`	`@color: @white, @alpha: 1`	အကြောင်းအရာတစ်ခုကို ကြည်လင်ပြတ်သားသော နောက်ခံအရောင် ပေးပါ။
`#translucent > .border()`	`@color: @white, @alpha: 1`	ဒြပ်စင်တစ်ခုကို အလင်းဝင်သော ဘောင်အရောင် ပေးပါ။
`#gradient > .vertical()`	`@startColor, @endColor`	ဘရောင်ဇာ ဒေါင်လိုက် နောက်ခံ မျဉ်းကြောင်းကို ဖြတ်၍ ဖန်တီးပါ။
`#gradient > .horizontal()`	`@startColor, @endColor`	ဘရောင်ဇာ ဖြတ်ကျော်ထားသော အလျားလိုက် နောက်ခံ gradient ဖန်တီးပါ။
`#gradient > .directional()`	`@startColor, @endColor, @deg`	ဘရောင်ဇာ ဖြတ်ကျော်သည့် ဦးတည်ချက် နောက်ခံ ရောင်စုံ ဖန်တီးပါ။
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	ရောင်စုံသုံးရောင်စုံ နောက်ခံအရောင်ခြယ်သည့် ဘရောက်ဇာတစ်ခု ဖန်တီးပါ။
`#gradient > .radial()`	`@innerColor, @outerColor`	ဘရောင်ဇာ ဖြတ်ကျော်ထားသော အစွန်းအထင်းနောက်ခံ အရောင်အသွေးကို ဖန်တီးပါ။
`#gradient > .striped()`	`@color, @angle`	ဘရောင်ဇာဖြတ်ထားသော အစင်းကြောင်း နောက်ခံအရောင်အဆင့် ဖန်တီးပါ။
`#gradientBar()`	`@primaryColor, @secondaryColor`	အရောင်အသွေးနှင့် အနည်းငယ်ပိုမှောင်သောဘောင်ကို သတ်မှတ်ရန် ခလုတ်များအတွက် အသုံးပြုသည်။

မှတ်ချက်- အကယ်၍ သင်သည် ပြုပြင်ထားသော CSS ဖြင့် GitHub သို့ ဆွဲယူတောင်းဆိုမှုတစ်ခုကို တင်သွင်းနေပါက၊ သင်သည် ဤနည်းလမ်းများထဲမှ CSS ကို ပြန်လည်ပေါင်းစည်း ရပါ မည်။

ပြုစုရန်ကိရိယာများ

makefile နှင့်အတူ Node

အောက်ဖော်ပြပါ command ကို run ခြင်းဖြင့် NPM ဖြင့် LESS command line compiler ကို install လုပ်ပြီး uglify-js ကို ကမ္ဘာအနှံ့တွင် ထည့်သွင်းပါ။

$ npm install -g သည် uglify-js နည်းသည်။

makeထည့်သွင်းပြီး သည်နှင့် သင်၏ bootstrap directory ၏ root မှ run ပြီး အားလုံးပြီးသွားပါပြီ။

ထို့အပြင်၊ အကယ်၍ သင့်တွင် watchr ကို ထည့်သွင်းထားပါက၊ သင်သည် make watchbootstrap lib တွင် ဖိုင်တစ်ခုကို တည်းဖြတ်သည့်အခါတိုင်း bootstrap ကို အလိုအလျောက် ပြန်လည်တည်ဆောက်နိုင်သည် (၎င်းသည် မလိုအပ်ပါ၊ အဆင်ပြေသောနည်းလမ်းတစ်ခုသာဖြစ်သည်)။

Command line

Node မှတဆင့် LESS command line tool ကို install လုပ်ပြီး အောက်ပါ command ကို run ပါ။

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

--compressအကယ်၍ သင်သည် အချို့သော bytes ကို သိမ်းဆည်းရန် ကြိုးစားနေပါက ထို command တွင် ထည့်သွင်းရန် သေချာပါစေ ။

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 ဖြင့် တည်ဆောက်ထားသည်။

အဘယ်ကြောင့်နည်း။

ဘာတွေပါဝင်လဲ?

ပိုမိုသိရှိရန်

ကိန်းရှင်များ

Mixins

စစ်ဆင်ရေး

Bootstrap variable များသည် LESS variableများ၊ ၎င်းတို့၏တန်ဖိုးများနှင့် အသုံးပြုမှုလမ်းညွှန်ချက်များ

ဟိုက်ပါလင့်ခ်များ

ဂရစ်စနစ်

စာစီစာရိုက်

မီးခိုးရောင်အရောင်များ

လေယူလေသိမ်းအရောင်များ

အစိတ်အပိုင်းများ

ခလုတ်များ

ပုံစံများ

Navbar

ပြည်နယ်များနှင့် သတိပေးချက်များကို ဖွဲ့ပါ။

Bootstrap ရောနှောခြင်း။

mixins အကြောင်း

အခြေခံအရောအနှောများ

Parametric mixins

အလွယ်တကူ သင့်ကိုယ်ပိုင်ထည့်ပါ။

ရောနှောပါဝင်ခြင်း။

အသုံးအဆောင်များ

ပုံစံများ

စာစီစာရိုက်

ဂရစ်စနစ်

CSS3 ဂုဏ်သတ္တိများ

နောက်ခံများနှင့် gradients များ

LESS ဖြင့် Bootstrap ပြုစုခြင်း။

ပြုစုရန်ကိရိယာများ

makefile နှင့်အတူ Node

Command line

Javascript

တရားဝင်မဟုတ်သော Mac အက်ပ်

နောက်ထပ် Mac အက်ပ်များ

အကြပ်အတည်း

CodeKit

ရိုးရှင်းသော