Օգտագործելով LESS-ը Bootstrap-ով
Անհատականացրեք և ընդլայնեք Bootstrap-ը LESS- ով, CSS նախապրոցեսորով, որպեսզի օգտվեք փոփոխականներից, միքսներից և ավելին, որոնք օգտագործվում են Bootstrap-ի CSS-ը կառուցելու համար:
Կառուցվել է LESS-ով
Ինչու՞ ՔԻՉ
Bootstrap-ը պատրաստված է LESS-ի հիմքում, դինամիկ ոճի լեզվով, որը ստեղծվել է մեր լավ ընկեր Ալեքսիս Սելլիերի կողմից : Այն դարձնում է համակարգերի վրա հիմնված CSS-ի մշակումն ավելի արագ, հեշտ և ավելի զվարճալի:
Ի՞նչ է ներառված:
Որպես CSS-ի ընդլայնում, LESS-ը ներառում է փոփոխականներ, միքսներ կոդի վերօգտագործելի հատվածների համար, գործողություններ պարզ մաթեմատիկայի, բնադրման և նույնիսկ գունային ֆունկցիաների համար:
Փոփոխականներ
CSS-ում գույների և պիքսելների արժեքների կառավարումը կարող է մի փոքր դժվար լինել, որը սովորաբար լի է պատճեններով և տեղադրմամբ: Սակայն ոչ LESS-ով, գույները կամ պիքսելային արժեքները նշանակեք որպես փոփոխականներ և փոխեք դրանք մեկ անգամ:
Միքսիններ
Այդ երեք սահմանային շառավղային հայտարարագրերը, որոնք դուք պետք է կատարեք սովորական CSS-ում: Այժմ դրանք իջել են մեկ տողի՝ միքսինների օգնությամբ, կոդի հատվածներ, որոնք կարող եք նորից օգտագործել ցանկացած վայրում:
Գործողություններ
Դարձրեք ձեր ցանցը, առաջատարը և ավելի գերճկուն՝ կատարելով մաթեմատիկական գործողությունները թռիչքի ժամանակ: Բազմապատկեք, բաժանեք, ավելացրեք և հանեք ձեր ճանապարհը դեպի CSS ողջախոհություն:
Bootstrap փոփոխականներ LESS փոփոխականները, դրանց արժեքները և օգտագործման ուղեցույցները
Հիպերհղումներ
@linkColor |
#08c | Հղման տեքստի կանխադրված գույնը | |
@linkColorHover |
darken(@linkColor, 15%) |
Հղման տեքստի կանխադրված սավառնողի գույնը |
Ցանցային համակարգ
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Տպագրություն
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Մոխրագույն գույներ
@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 |
Բաղադրիչներ
Կոճակներ
@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 |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap միքսներ
Միքսների մասին
Հիմնական խառնուրդներ
Հիմնական միքսինը, ըստ էության, ներառում է կամ մասնակի CSS-ի հատվածի համար: Դրանք գրված են ճիշտ այնպես, ինչպես CSS դասը և կարող են կանչվել ցանկացած վայրում:
- . տարր {
- . հստակեցում ();
- }
Պարամետրային խառնուրդներ
Պարամետրային միքսինը նման է հիմնական միքսինին, բայց այն նաև ընդունում է պարամետրեր (այստեղից՝ անվանումը) կամընտիր լռելյայն արժեքներով:
- . տարր {
- . եզրագիծ - շառավիղ ( 4px );
- }
Հեշտությամբ ավելացրեք ձեր սեփականը
Bootstrap-ի գրեթե բոլոր միքսները պահվում են mixins.less-ում, հիանալի օգտակար .less ֆայլ, որը հնարավորություն է տալիս օգտագործել mixin գործիքակազմի .less ֆայլերից որևէ մեկում:
Այսպիսով, առաջ գնացեք և օգտագործեք գոյություն ունեցողները կամ ազատ զգալ ավելացրեք ձերը, ինչպես ձեզ հարկավոր է:
Ներառված խառնուրդներ
Կոմունալ ծառայություններ
| Միքսին | Պարամետրեր | Օգտագործումը |
|---|---|---|
.clearfix() |
ոչ ոք | Ավելացրե՛ք ցանկացած ծնողի մեջ՝ լողացողները մաքրելու համար |
.tab-focus() |
ոչ ոք | Կիրառեք Webkit կենտրոնացման ոճը և կլորացրեք Firefox-ի ուրվագիծը |
.center-block() |
ոչ ոք | Ավտոմատ կենտրոնացրեք բլոկի մակարդակի տարրը՝ օգտագործելովmargin: auto |
.ie7-inline-block() |
ոչ ոք | Օգտագործեք սովորականից բացի՝ display: inline-blockIE7 աջակցություն ստանալու համար |
.size() |
@height: 5px, @width: 5px |
Արագորեն սահմանեք բարձրությունը և լայնությունը մեկ տողի վրա |
.square() |
@size: 5px |
Կառուցվում է .size()լայնությունը և բարձրությունը որպես նույն արժեք սահմանելու համար |
.opacity() |
@opacity: 100 |
Ամբողջ թվերով սահմանեք անթափանցիկության տոկոսը (օրինակ՝ «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 % լայնությամբ ջրհորով |
CSS3 հատկություններ
| Միքսին | Պարամետրեր | Օգտագործումը |
|---|---|---|
.border-radius() |
@radius: 5px |
Կլորացրեք տարրի անկյունները: Կարող է լինել մեկ արժեք կամ չորս տարածքով առանձնացված արժեքներ |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Տարրին ավելացրեք ստվեր |
.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 սյունակները |
Նախապատմություններ և գրադիենտներ
| Միքսին | Պարամետրեր | Օգտագործումը |
|---|---|---|
#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 |
Օգտագործվում է կոճակների համար՝ գրադիենտ և մի փոքր ավելի մուգ եզրագիծ նշանակելու համար |
Bootstrap-ի կազմում LESS-ով
Կազմելու գործիքներ
Հանգույց՝ makefile-ով
Տեղադրեք LESS հրամանի տողի կոմպիլյատորը և uglify-js-ը գլոբալ npm-ով` գործարկելով հետևյալ հրամանը.
$ npm install -g պակաս uglify-js
Տեղադրվելուց հետո պարզապես գործարկեք makeձեր bootstrap գրացուցակի արմատից և ամեն ինչ պատրաստ է:
Բացի այդ, եթե դուք տեղադրել եք watchr , դուք կարող եք վազել make watch, որպեսզի bootstrap-ը ավտոմատ կերպով վերակառուցվի ամեն անգամ, երբ ֆայլը խմբագրում եք bootstrap lib-ում (սա պարտադիր չէ, պարզապես հարմար մեթոդ է):
Հրամանի տող
Տեղադրեք LESS հրամանի տող գործիքը Node-ի միջոցով և գործարկեք հետևյալ հրամանը.
$ lessc ./lib/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-ում :