بەکارهێنانی LESS لەگەڵ Bootstrap
خۆکارانە و درێژکردنەوەی Bootstrap بە LESS , پێش پرۆسێسەرێکی CSS، بۆ ئەوەی سوود لە گۆڕاوەکان و میکسینەکان و زۆر شتی تر وەربگریت کە بۆ دروستکردنی CSS ی Bootstrap بەکاردەهێنرێن.
بە LESS دروستکراوە
بۆچی کەمتر؟
بووتستراپ بە LESS لە ناوەڕۆکەکەیدا دروستکراوە، زمانێکی ستایلشیتی داینامیکی کە لەلایەن هاوڕێ باشمانەوە دروستکراوە، ئەلێکسیس سێلیێر . پەرەپێدانی CSS لەسەر بنەمای سیستەم خێراتر و ئاسانتر و خۆشتر دەکات.
چی لەخۆدەگرێت؟
وەک درێژکراوەی CSS، LESS گۆڕاوەکان، میکسینەکان بۆ پارچە کۆدەکانی دووبارە بەکارهێنەرەوە، کارەکان بۆ بیرکاری سادە، هێلانەکردن و تەنانەت ئەرکەکانی ڕەنگ لەخۆدەگرێت.
گۆڕاوەکان
بەڕێوەبردنی ڕەنگەکان و بەهاکانی پێکسڵ لە CSS دەتوانێت کەمێک ئازاربەخش بێت، بەزۆری پڕە لە کۆپی و لێدان. هەرچەندە بە LESS نا-ڕەنگەکان یان بەهاکانی پێکسڵ وەک گۆڕاو دیاری بکە و جارێک بیانگۆڕە.
میکسینەکان
ئەو سێ ڕاگەیاندنە سنوور-تیژڕەی پێویستە لە ئاسایی ol' CSS بیکەیت؟ ئێستا بە یارمەتی میکسینەکان بۆ یەک دێڕ دابەزیون، پارچە کۆدەکان کە دەتوانیت لە هەر شوێنێک بەکاری بهێنیتەوە.
ئۆپەراسیۆنەکان
تۆڕەکەت، پێشەنگ، و سوپەر نەرمتر بکە بە ئەنجامدانی بیرکاری لەسەر مێش لەگەڵ ئۆپەراسیۆنەکان. ڕێگاکەت بۆ CSS sanity چەند هێندە بکە، دابەش بکە، زیاد بکە و کەم بکە.
گۆڕاوەکانی بووتستراپ گۆڕاوەکانی کەمتر، بەهاکانیان و ڕێنماییەکانی بەکارهێنان
هایپەرلینکەکان
@linkColor |
#08ج | ڕەنگی دەقی بەستەر بە پێشوەختە | |
@linkColorHover |
darken(@linkColor, 15%) |
ڕەنگی هۆڤەری دەقی بەستەر بە پێشوەختە |
سیستەمی تۆڕ
@gridColumns |
12. 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 |
#eee | |
@white |
#fff |
ڕەنگەکانی لەهجە
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
پێکهاتەکان
دوگمەکان
@primaryButtonBackground |
@linkColor |
فۆڕمەکان
@placeholderText |
@grayLight |
ناوبەر
@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 |
میکسینەکانی بووتستراپ
دەربارەی میکسینەکان
میکسینە بنەڕەتییەکان
میکسینێکی بنەڕەتی لە بنەڕەتدا یەکگرتنە یان بەشێکە بۆ پارچەیەک لە CSS. ئەوان هەر وەک پۆلێکی CSS نووسراون و دەتوانرێت لە هەر شوێنێک بانگ بکرێن.
- . توخم {
- . ڕوونکردنەوە ();
- }
میکسینەکانی پارامێتری
میکسینێکی پارامێتری تەنها وەک میکسینێکی بنەڕەتی وایە، بەڵام پارامێتەرەکانیش قبوڵ دەکات (لێرەوە ناوەکەی لێنراوە) بە بەهای پێشوەختەی هەڵبژاردە.
- . توخم {
- . سنوور - تیژڕەوی ( 4px );
- }
بە ئاسانی خۆت زیاد بکە
نزیکەی هەموو میکسینەکانی Bootstrap لە mixins.less هەڵدەگیرێن، فایلێکی .less ی سوودبەخشێکی نایاب کە ڕێگەت پێدەدات میکسینێک لە هەریەکێک لە فایلەکانی .less لە ئامرازەکەدا بەکاربهێنیت.
بۆیە، بڕۆ پێشەوە و ئەوانەی هەن بەکاربهێنە یان ئازادانە خۆت زیاد بکە بەپێی پێویست.
میکسینەکانی لەگەڵدایە
خزمەتگوزارییەکان
| میکسین | پارامێتەرەکان | بەکارهێنان |
|---|---|---|
.clearfix() |
هیچ | زیاد بکە بۆ هەر دایک و باوکێک بۆ پاککردنەوەی فلۆتەکانی ناوەوە |
.tab-focus() |
هیچ | شێوازی فۆکەسی وێبکیت و هێڵکاری فایەرفۆکسی دەوری جێبەجێ بکە |
.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") |
فۆڕمەکان
| میکسین | پارامێتەرەکان | بەکارهێنان |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderڕەنگی دەقەکە بۆ زانیارییەکانی ناوەوە دابنێ |
تایپۆگرافی
| میکسین | پارامێتەرەکان | بەکارهێنان |
|---|---|---|
#font > #family > .serif() |
هیچ | وا لە توخمێک بکە کە ستاکێکی فۆنت سێریف بەکاربهێنێت |
#font > #family > .sans-serif() |
هیچ | وا لە توخمێک بکە کە ستاکێکی فۆنت sans-serif بەکاربهێنێت |
#font > #family > .monospace() |
هیچ | وا لە توخمێک بکە کە ستێکی فۆنتێکی مۆنۆسپەیس بەکاربهێنێت |
#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 دابنێ، و قەبارە و کێش و پێشەنگ کۆنتڕۆڵ بکە |
سیستەمی تۆڕ
| میکسین | پارامێتەرەکان | بەکارهێنان |
|---|---|---|
.container-fixed() |
هیچ | دەفرێکی پانایی جێگیر (بە @siteWidth) بۆ ڕاگرتنی ناوەڕۆکەکەت دابین بکە |
.columns() |
@columns: 1 |
ستوونی تۆڕێک دروست بکە کە هەر ژمارەیەک ستوون دەگرێتەوە (بەپێی پێشوەختە بۆ 1 ستوون) |
.offset() |
@columns: 1 |
ستوونی تۆڕێک بە پەراوێزی چەپ کە هەر ژمارەیەک ستوون دەگرێتەوە، ئۆفس بکە |
.gridColumn() |
هیچ | وا لە توخمێک بکە وەک ستوونی تۆڕێک هەڵبفڕێت |
تایبەتمەندیەکانی 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 |
دروستکردنی گرادێنتێکی پاشبنەمای ئاسۆیی cross-browser |
.#gradient > .directional() |
@startColor, @endColor, @deg |
دروستکردنی گرادێنتێکی پاشبنەمای ئاراستەیی cross-browser |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
دروستکردنی گرادێنتێکی پاشبنەمای سێ ڕەنگی cross-browser |
.#gradient > .radial() |
@innerColor, @outerColor |
دروستکردنی گرادێنتێکی پاشبنەمای تیشكی cross-browser |
.#gradient > .striped() |
@color, @angle |
دروستکردنی گرادێنتێکی پاشبنەمای ڕەنگاوڕەنگی وێبگەڕی بڕاو |
.#gradientBar() |
@primaryColor, @secondaryColor |
بۆ دوگمەکان بەکاردێت بۆ دیاریکردنی گرادێنت و سنوورێکی کەمێک تاریکتر |
کۆکردنەوەی Bootstrap بە LESS
ئامرازەکان بۆ کۆمپایڵکردن
گرێ بە makefile
کۆمپایەری هێڵی فەرمانی LESS بە شێوەیەکی جیهانی بە npm دابمەزرێنە بە جێبەجێکردنی ئەم فرمانەی خوارەوە:
$ npm دامەزراندن -g کەمتر
کاتێک دامەزرا تەنها makeلە ڕەگی دایرێکتۆری بووتستراپەکەتەوە ڕابکە و هەمووت ڕێکدەخرێت.
سەرەڕای ئەوە، ئەگەر watchrت دامەزراندووە، لەوانەیە کار بکەیت make watchبۆ ئەوەی bootstrap بە شێوەیەکی ئۆتۆماتیکی دووبارە دروست بکرێتەوە هەر جارێک کە دەستکاری فایلێک دەکەیت لە bootstrap lib (ئەمە پێویست نییە، تەنها ڕێگەیەکی ئاسانکارییە).
هێڵی فرمان
ئامرازی هێڵی فەرمانی LESS لە ڕێگەی Node دابمەزرێنە و ئەم فرمانەی خوارەوە جێبەجێ بکە:
$ lessc ./lib/bootstrap.less > بوتستراپ.css
دڵنیابە لەو فرمانەدا بیخەیتە --compressناو ئەو فرمانەوە ئەگەر هەوڵی پاشەکەوتکردنی هەندێک بایت دەدەیت!
جاڤاسکڕێپت
نوێترین Less.js دابەزێنە و ڕێڕەوی بۆی (و Bootstrap) لە <head>.
<link rel = "stylesheet/less" href = "/ڕێڕەو/بۆ/bootstrap.less" > <script src = "/ڕێڕەو/بۆ/کەمتر.js" ></script>
بۆ دووبارە کۆکردنەوەی فایلەکانی .less تەنها پاشەکەوتیان بکە و لاپەڕەکەت دووبارە باربکەرەوە. Less.js کۆیان دەکاتەوە و لە کۆگای ناوخۆییدا هەڵیاندەگرێت.
ئەپی ماکی نافەرمی
ئەپی نافەرمی ماک سەیری بەڕێوەبەرایەتییەکانی فایلەکانی .less دەکات و کۆدەکان کۆدەکاتەوە بۆ فایلە ناوخۆییەکان دوای هەر پاشەکەوتکردنی فایلێکی .less کە سەیری دەکرێت.
ئەگەر حەزت لێیە دەتوانیت هەڵبژاردەکان لە ئەپەکەدا بگۆڕیت بۆ بچووککردنەوەی ئۆتۆماتیکی و فایلە کۆکراوەکان لە کام بەڕێوەبەرایەتیدا کۆتایی دێت.
زیاتر لە ئەپی ماک
کرانچ
کرانچ مۆنتاژ و کۆمپایەرێکی LESS ی نایاب و سەرنجڕاکێشە کە لەسەر ئەدۆبی ئایر دروستکراوە.
کۆدکیت
لەلایەن هەمان کابرای ئەپی نافەرمی ماکەوە دروستکراوە، CodeKit ئەپێکی ماکە کە LESS و SASS و Stylus و CoffeeScript کۆدەکاتەوە.
بێ سادە
ئەپی ماک و لینوکس و کۆمپیوتەر بۆ کۆکردنەوەی فایلەکانی LESS ڕاکێشان و دابەزاندن. لەگەڵ ئەوەشدا، کۆدی سەرچاوە لە GitHub دایە .