Օգտագործելով LESS-ը Bootstrap-ով

Անհատականացրեք և ընդլայնեք Bootstrap-ը LESS- ով, CSS նախապրոցեսորով, որպեսզի օգտվեք փոփոխականներից, միքսներից և ավելին, որոնք օգտագործվում են Bootstrap-ի CSS-ը կառուցելու համար:

Ինչու՞ ՔԻՉ

Bootstrap-ը պատրաստված է LESS-ի հիմքում, դինամիկ ոճի լեզվով, որը ստեղծվել է մեր լավ ընկեր Ալեքսիս Սելլիերի կողմից : Այն դարձնում է համակարգերի վրա հիմնված CSS-ի մշակումն ավելի արագ, հեշտ և ավելի զվարճալի:

Ի՞նչ է ներառված:

Որպես CSS-ի ընդլայնում, LESS-ը ներառում է փոփոխականներ, միքսներ կոդի վերօգտագործելի հատվածների համար, գործողություններ պարզ մաթեմատիկայի, բնադրման և նույնիսկ գունային ֆունկցիաների համար:

Իմացեք ավելին

Քիչ CSS

Այցելեք պաշտոնական կայքը՝ http://lesscss.org/ ՝ ավելին իմանալու համար:

Փոփոխականներ

CSS-ում գույների և պիքսելների արժեքների կառավարումը կարող է մի փոքր դժվար լինել, որը սովորաբար լի է պատճեններով և տեղադրմամբ: Սակայն ոչ LESS-ով, գույները կամ պիքսելային արժեքները նշանակեք որպես փոփոխականներ և փոխեք դրանք մեկ անգամ:

Միքսիններ

Այդ երեք սահմանային շառավղային հայտարարագրերը, որոնք դուք պետք է կատարեք սովորական CSS-ում: Այժմ դրանք իջել են մեկ տողի՝ միքսինների օգնությամբ, կոդի հատվածներ, որոնք կարող եք նորից օգտագործել ցանկացած վայրում:

Գործողություններ

Դարձրեք ձեր ցանցը, առաջատարը և ավելի գերճկուն՝ կատարելով մաթեմատիկական գործողությունները թռիչքի ժամանակ: Բազմապատկեք, բաժանեք, ավելացրեք և հանեք ձեր ճանապարհը դեպի CSS ողջախոհություն:

Փայտամածեր և հղումներ

@bodyBackground @white Էջի ֆոնի գույնը
@textColor @grayDark Տեքստի կանխադրված գույնը ամբողջ մարմնի, վերնագրերի և այլնի համար
@linkColor #08c Հղման տեքստի կանխադրված գույնը
@linkColorHover darken(@linkColor, 15%) Հղման տեքստի կանխադրված սավառնողի գույնը

Ցանցային համակարգ

@gridColumns 12
@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 Մենլո, Մոնակո, «Courier New», մոնոսփեյս
@baseFontSize 13px Պետք է լինի պիքսել
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Պետք է լինի պիքսել
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Սեղաններ

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

Մոխրագույն գույներ

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #էէէ
@white #ֆֆֆ

Շեշտադրման գույներ

@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 #468847
@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

Միքսների մասին

Հիմնական խառնուրդներ

Հիմնական միքսինը, ըստ էության, ներառում է կամ մասնակի CSS-ի հատվածի համար: Դրանք գրված են ճիշտ այնպես, ինչպես CSS դասը և կարող են կանչվել ցանկացած վայրում:

  1. . տարր {
  2. . հստակեցում ();
  3. }

Պարամետրային խառնուրդներ

Պարամետրային միքսինը նման է հիմնական միքսինին, բայց այն նաև ընդունում է պարամետրեր (այստեղից՝ անվանումը) կամընտիր լռելյայն արժեքներով:

  1. . տարր {
  2. . եզրագիծ - շառավիղ ( 4px );
  3. }

Հեշտությամբ ավելացրեք ձեր սեփականը

Bootstrap-ի գրեթե բոլոր միքսները պահվում են mixins.less-ում, հիանալի օգտակար .less ֆայլ, որը հնարավորություն է տալիս օգտագործել mixin գործիքակազմի .less ֆայլերից որևէ մեկում:

Այսպիսով, առաջ գնացեք և օգտագործեք գոյություն ունեցողները կամ ազատ զգալ ավելացրեք ձերն ըստ անհրաժեշտության:

Ներառված խառնուրդներ

Կոմունալ ծառայություններ

Միքսին Պարամետրեր Օգտագործումը
.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»)

Ձևաթղթեր

Միքսին Պարամետրեր Օգտագործումը
.placeholder() @color: @placeholderText Սահմանեք placeholderտեքստի գույնը մուտքագրման համար

Տպագրություն

Միքսին Պարամետրեր Օգտագործումը
#font > #family > .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 Սահմանեք տառատեսակների ընտանիքը սերիֆի վրա և վերահսկեք չափը, քաշը և առաջատարը
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Սահմանեք տառատեսակների ընտանիքը sans-serif և վերահսկեք չափը, քաշը և առաջատարը
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Սահմանեք տառատեսակների ընտանիքը մոնոսփեյսի վրա և վերահսկեք չափը, քաշը և առաջատարը

Ցանցային համակարգ

Միքսին Պարամետրեր Օգտագործումը
.container-fixed() ոչ ոք Ստեղծեք հորիզոնական կենտրոնացված կոնտեյներ՝ ձեր բովանդակությունը պահելու համար
#grid > .core() @gridColumnWidth, @gridGutterWidth Ստեղծեք պիքսելային ցանցային համակարգ (կոնտեյներ, տող և սյունակ) n սյունակով և x պիքսել լայն հեղեղով
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Ստեղծեք տոկոսային ցանցային համակարգ n սյունակով և x % լայնությամբ ջրհորով
#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 Օգտագործվում է կոճակների համար՝ գրադիենտ և մի փոքր ավելի մուգ եզրագիծ նշանակելու համար
Նշում ․ _ _

Կազմելու գործիքներ

Հանգույց՝ makefile-ով

Տեղադրեք LESS հրամանի տողի կոմպիլյատորը, JSHint-ը, Recess-ը և uglify-js-ը գլոբալ npm-ով` գործարկելով հետևյալ հրամանը.

$ npm install -g պակաս jshint ընդմիջում uglify-js

Տեղադրվելուց հետո պարզապես գործարկեք makeձեր bootstrap գրացուցակի արմատից և ամեն ինչ պատրաստ է:

Բացի այդ, եթե դուք տեղադրել եք 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-ը հիանալի տեսք ունեցող LESS խմբագիր և կոմպիլյատոր է՝ կառուցված Adobe Air-ի վրա:

CodeKit

Ստեղծվել է նույն մարդու կողմից, ինչ ոչ պաշտոնական Mac հավելվածը, CodeKit-ը Mac հավելված է, որը կազմում է LESS, SASS, Stylus և CoffeeScript:

Պարզ

Mac, Linux և PC հավելված՝ ՔԱՂԱՔ ֆայլեր քաշելու և թողնելու համար: Բացի այդ, աղբյուրի կոդը գտնվում է GitHub-ում :