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

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

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

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

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

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

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

CSS နည်းသည်။

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

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

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

Mixins

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

စစ်ဆင်ရေး

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

ငြမ်းနှင့် လင့်များ

@bodyBackground @white စာမျက်နှာနောက်ခံအရောင်
@textColor @grayDark ကိုယ်ထည်တစ်ခုလုံး၊ ခေါင်းစီးများနှင့် အခြားအရာများအတွက် မူရင်းစာသားအရောင်
@linkColor #08c မူရင်းလင့်ခ် စာသားအရောင်
@linkColorHover darken(@linkColor, 15%) ပုံသေ လင့်ခ် စာသား အရောင်

ဂရစ်စနစ်

@gridColumns ၁၂
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth ၆.၃၈၂၉၇၈၇၂၃ ရာခိုင်နှုန်း၊
@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 pixels ဖြစ်ရမည်။
@baseFontFamily @sansFontFamily
@baseLineHeight 18px pixels ဖြစ်ရမည်။
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

စားပွဲများ

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

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

@black #၀၀၀
@grayDarker #၂၂၂
@grayDark #၃၃၃
@gray #555
@grayLight #999
@grayLighter #အီး
@white #ffff

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

@blue #049cdb
@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

mixins အကြောင်း

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

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

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

Parametric mixins

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

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

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

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

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

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

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

Mixin ကန့်သတ်ချက်များ အသုံးပြုမှု
.clearfix() မရှိ အတွင်းရှိမျှောခြင်းကိုရှင်းလင်းရန်မည်သည့်မိဘသို့ထည့်ပါ။
.tab-focus() မရှိ Webkit အာရုံစူးစိုက်မှုပုံစံကို အသုံးပြုပြီး Firefox ၏ အဝိုင်းပုံစံကို အသုံးပြုပါ။
.center-block() မရှိ ဘလောက်အဆင့်ဒြပ်စင်ကို အသုံးပြု၍ အလိုအလျောက် ဗဟိုချက်မထားပါ။margin: auto
.ie7-inline-block() မရှိ display: inline-blockIE7 အထောက်အပံ့ရရှိရန် ပုံမှန်အပြင် အသုံးပြုပါ။
.size() @height @width မျဉ်းတစ်ကြောင်းတွင် အမြင့်နှင့် အကျယ်ကို အမြန်သတ်မှတ်ပါ။
.square() @size အကျယ် .size()နှင့် အမြင့်ကို တူညီသောတန်ဖိုးအဖြစ် သတ်မှတ်ရန် တည်ဆောက်သည်။
.opacity() @opacity ကိန်းဂဏန်းများ တစ်ခုလုံးတွင်၊ အလင်းပိတ်မှု ရာခိုင်နှုန်း (ဥပမာ၊ "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 % ကျယ်ပြန့်သော ရေမြောင်းများ ဖြင့် ရာခိုင်နှုန်းဇယားကွက်စနစ်တစ်ခုကို ဖန်တီးပါ။
#grid > .input() @gridColumnWidth, @gridGutterWidth ဒြပ်စင် များအတွက် pixel grid စနစ်အား ဖန်တီး inputပါ၊ padding နှင့် ဘောင်များကို တွက်ချက်ပါ။
.makeColumn @columns: 1, @offset: 0 မည်သည့် အတန်းအစား မဆို divဇယားကွက်ကော်လံအဖြစ် ပြောင်းပါ။.span*

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

Mixin ကန့်သတ်ချက်များ အသုံးပြုမှု
.border-radius() @radius ဒြပ်စင်တစ်ခု၏ ထောင့်များကို လှည့်ပါ။ တန်ဖိုးတစ်ခုတည်း သို့မဟုတ် နေရာခြားထားသော တန်ဖိုးလေးခု ဖြစ်နိုင်သည်။
.box-shadow() @shadow ဒြပ်စင်တစ်ခုသို့ drop shadow တစ်ခုထည့်ပါ။
.transition() @transition CSS3 အသွင်ကူးပြောင်းမှုအကျိုးသက်ရောက်မှုကို ထည့်ပါ (ဥပမာ၊ all .2s linear)
.rotate() @degrees ဒြပ်စင် n ဒီဂရီ လှည့်
.scale() @ratio ဒြပ်စင်တစ်ခုအား ၎င်း၏ မူလအရွယ်အစားနှင့် အဆ ချိန်ညှိပါ
.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)

နောက်ခံများနှင့် 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၊ JSHint၊ Recess နှင့် uglify-js ကို ထည့်သွင်းပါ။

$ npm install -g လျော့နည်း jshint recess uglify-js

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

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

Command line

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

$lessc ./less/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 ဖိုင်ကို သိမ်းဆည်းပြီးတိုင်း ကုဒ်ကို ပြည်တွင်းဖိုင်များသို့ စုစည်းပေးပါသည်။

သင်နှစ်သက်ပါက အလိုအလျောက် အသေးစိပ်ပြုလုပ်ရန် အက်ပ်ရှိ စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စုစည်းထားသောဖိုင်များ အဆုံးထိ မည်သည့်လမ်းညွှန်ချက်တွင် ပါဝင်နိုင်သည်။

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

အကြပ်အတည်း

Crunch သည် Adobe Air တွင် တည်ဆောက်ထားသော အလွန်သေးငယ်သော တည်းဖြတ်သူနှင့် စုစည်းမှုကောင်းတစ်ခုဖြစ်သည်။

CodeKit

တရားဝင်မဟုတ်သော Mac အက်ပ်နှင့် အလားတူလူက ဖန်တီးထားသည့် CodeKit သည် LESS၊ SASS၊ Stylus နှင့် CoffeeScript တို့ကို စုစည်းထားသည့် Mac အက်ပ်တစ်ခုဖြစ်သည်။

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

ဖိုင်နည်းပါးသော ဖိုင်များကို ဆွဲယူ၍ စုစည်းမှုအတွက် Mac၊ Linux နှင့် PC အက်ပ်။ ထို့အပြင်၊ အရင်းအမြစ်ကုဒ်သည် GitHub တွင် ရှိသည်။