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

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

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

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

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

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

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

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

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

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

Mixins

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

စစ်ဆင်ရေး

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

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

`@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`	#f3edd2
`@warningBackground`	#c09853
`@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()`	မရှိ	`@siteWidth`သင့်အကြောင်းအရာကို ကိုင်ဆောင်ရန်အတွက် ပုံသေအနံ (သတ်မှတ်ထားသည့် ) ကွန်တိန်နာတစ်ခု ပေးပါ။
`.columns()`	`@columns: 1`	မည်သည့်ကော်လံအရေအတွက်ကိုမဆို ချဲ့ထွင်နိုင်သော ဂရစ်ကော်လံတစ်ခု တည်ဆောက်ပါ (မူရင်းတွင် ကော်လံ 1 ခုအထိ)
`.offset()`	`@columns: 1`	မည်သည့်ကော်လံအရေအတွက်ကိုမဆို ဖြန့်ကျက်ထားသော ဘယ်ဘက်အနားသတ်ဖြင့် ဂရစ်ကော်လံကို offset လုပ်ပါ။
`.gridColumn()`	မရှိ	ဇယားကွက်ကော်လံကဲ့သို့ ဒြပ်စင်တစ်ခုကို မျှောပါ။

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`	ဒြပ်စင်တစ်ခုအား ၎င်း၏မူလအရွယ်အစား၏ n အဆအထိ ချိန်ညှိပါ။
`.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 > .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 လုပ်ပါ။

$ npm install လျှော့ပါ။

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

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