بەکارهێنانی LESS لەگەڵ Bootstrap

خۆکارانە و درێژکردنەوەی Bootstrap بە LESS , پێش پرۆسێسەرێکی CSS، بۆ ئەوەی سوود لە گۆڕاوەکان و میکسینەکان و زۆر شتی تر وەربگریت کە بۆ دروستکردنی CSS ی Bootstrap بەکاردەهێنرێن.

بۆچی کەمتر؟

بووتستراپ بە LESS لە ناوەڕۆکەکەیدا دروستکراوە، زمانێکی ستایلشیتی داینامیکی کە لەلایەن هاوڕێ باشمانەوە دروستکراوە، ئەلێکسیس سێلیێر . پەرەپێدانی CSS لەسەر بنەمای سیستەم خێراتر و ئاسانتر و خۆشتر دەکات.

چی لەخۆدەگرێت؟

وەک درێژکراوەی CSS، LESS گۆڕاوەکان، میکسینەکان بۆ پارچە کۆدەکانی دووبارە بەکارهێنەرەوە، کارەکان بۆ بیرکاری سادە، هێلانەکردن و تەنانەت ئەرکەکانی ڕەنگ لەخۆدەگرێت.

زیاتر فێربە

بۆ زانیاری زیاتر سەردانی ماڵپەڕی فەرمی بکەن لە http://lesscss.org/ .

گۆڕاوەکان

بەڕێوەبردنی ڕەنگەکان و بەهاکانی پێکسڵ لە CSS دەتوانێت کەمێک ئازاربەخش بێت، بەزۆری پڕە لە کۆپی و لێدان. هەرچەندە بە LESS نا-ڕەنگەکان یان بەهاکانی پێکسڵ وەک گۆڕاو دیاری بکە و جارێک بیانگۆڕە.

میکسینەکان

ئەو سێ ڕاگەیاندنە سنوور-تیژڕەی پێویستە لە ئاسایی ol' CSS بیکەیت؟ ئێستا بە یارمەتی میکسینەکان بۆ یەک دێڕ دابەزیون، پارچە کۆدەکان کە دەتوانیت لە هەر شوێنێک بەکاری بهێنیتەوە.

ئۆپەراسیۆنەکان

تۆڕەکەت، پێشەنگ، و سوپەر نەرمتر بکە بە ئەنجامدانی بیرکاری لەسەر مێش لەگەڵ ئۆپەراسیۆنەکان. ڕێگاکەت بۆ CSS sanity چەند هێندە بکە، دابەش بکە، زیاد بکە و کەم بکە.

داسەپاندن و بەستەرەکان

`@bodyBackground`	`@white`	ڕەنگی پاشبنەمای لاپەڕە
`@textColor`	`@grayDark`	ڕەنگی دەقی پێشوەختە بۆ تەواوی جەستە و سەردێڕەکان و زۆر شتی تر
`@linkColor`	`#08c`	ڕەنگی دەقی بەستەر بە پێشوەختە
`@linkColorHover`	`darken(@linkColor, 15%)`	ڕەنگی هۆڤەری دەقی بەستەر بە پێشوەختە

سیستەمی تۆڕ

`@gridColumns`	12. 12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

تایپۆگرافی

`@sansFontFamily`	"هێلڤێتیکا نیو"، هێلڤێتیکا، ئاریال، بێ سێریف
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	مێنلۆ، مۆناکۆ، "کوریەر نیو"، مۆنۆسپەیس
`@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`	#eee
`@white`	#fff

ڕەنگەکانی لەهجە

`@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

ناوبەر

`@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`

یەکەی پاڵەوان

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

دەربارەی میکسینەکان

میکسینە بنەڕەتییەکان

میکسینێکی بنەڕەتی لە بنەڕەتدا یەکگرتنە یان بەشێکە بۆ پارچەیەک لە CSS. ئەوان هەر وەک پۆلێکی CSS نووسراون و دەتوانرێت لە هەر شوێنێک بانگ بکرێن.

. توخم {
  . ڕوونکردنەوە ();
}

میکسینەکانی پارامێتری

میکسینێکی پارامێتری تەنها وەک میکسینێکی بنەڕەتی وایە، بەڵام پارامێتەرەکانیش قبوڵ دەکات (لێرەوە ناوەکەی لێنراوە) بە بەهای پێشوەختەی هەڵبژاردە.

. توخم {
  . سنوور - تیژڕەوی ( 4px );
}

بە ئاسانی خۆت زیاد بکە

نزیکەی هەموو میکسینەکانی Bootstrap لە mixins.less هەڵدەگیرێن، فایلێکی .less ی سوودبەخشێکی نایاب کە ڕێگەت پێدەدات میکسینێک لە هەریەکێک لە فایلەکانی .less لە ئامرازەکەدا بەکاربهێنیت.

بۆیە، بڕۆ پێشەوە و ئەوانەی هەن بەکاربهێنە یان ئازادانە خۆت زیاد بکە بەپێی پێویست.

میکسینەکانی لەگەڵدایە

خزمەتگوزارییەکان

میکسین	پارامێتەرەکان	بەکارهێنان
`.clearfix()`	هیچ	زیاد بکە بۆ هەر دایک و باوکێک بۆ پاککردنەوەی فلۆتەکانی ناوەوە
`.tab-focus()`	هیچ	شێوازی فۆکەسی وێبکیت و هێڵکاری فایەرفۆکسی دەوری جێبەجێ بکە
`.center-block()`	هیچ	ئۆتۆ سەنتەری توخمێکی ئاستی بلۆک بە بەکارهێنانی`margin: auto`
`.ie7-inline-block()`	هیچ	بەکارهێنانی جگە لە ئاسایی `display: inline-block`بۆ بەدەستهێنانی پشتگیری IE7
`.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()`	هیچ	وا لە توخمێک بکە کە ستێکی فۆنتێکی مۆنۆسپەیس بەکاربهێنێت
`#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()`	هیچ	دەفرێکی ئاسۆیی ناوەند دروست بکە بۆ هەڵگرتنی ناوەڕۆکەکەت
`#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
`.resizable()`	`@direction: both`	هەر توخمێک لە لای ڕاست و خوارەوە قەبارەکەی بگۆڕە
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	وا لە ناوەڕۆکی هەر توخمێک بکە ستوونی 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`	بۆ دوگمەکان بەکاردێت بۆ دیاریکردنی گرادێنت و سنوورێکی کەمێک تاریکتر

تێبینی: ئەگەر داواکاری ڕاکێشان بە CSS دەستکاریکراوەوە پێشکەش بە GitHub دەکەیت، پێویستە CSS لە ڕێگەی هەریەکێک لەم ڕێگایانەوە کۆبکەیتەوە.

ئامرازەکان بۆ کۆمپایڵکردن

گرێ بە makefile

کۆمپایەری هێڵی فەرمانی LESS و uglify-js بە شێوەیەکی جیهانی لەگەڵ npm دابمەزرێنە بە جێبەجێکردنی ئەم فرمانەی خوارەوە:

$ npm دامەزراندن -g کەمتر uglify-js

کاتێک دامەزرا تەنها makeلە ڕەگی دایرێکتۆری بووتستراپەکەتەوە ڕابکە و هەمووت ڕێکدەخرێت.

سەرەڕای ئەوە، ئەگەر watchrت دامەزراندووە، لەوانەیە کار بکەیت make watchبۆ ئەوەی bootstrap بە شێوەیەکی ئۆتۆماتیکی دووبارە دروست بکرێتەوە هەر جارێک کە دەستکاری فایلێک دەکەیت لە bootstrap lib (ئەمە پێویست نییە، تەنها ڕێگەیەکی ئاسانکارییە).

هێڵی فرمان

ئامرازی هێڵی فەرمانی LESS لە ڕێگەی Node دابمەزرێنە و ئەم فرمانەی خوارەوە جێبەجێ بکە:

$ lessc ./کەمتر/بوتستراپ.کەمتر > bootstrap.css

دڵنیابە لەو فرمانەدا بیخەیتە --compressناو ئەو فرمانەوە ئەگەر هەوڵی پاشەکەوتکردنی هەندێک بایت دەدەیت!

جاڤاسکڕێپت

نوێترین Less.js دابەزێنە و ڕێڕەوی بۆی (و Bootstrap) لە <head>.

<link rel = "stylesheet/less" href = "/ڕێڕەو/بۆ/bootstrap.less" > <script src = "/ڕێڕەو/بۆ/کەمتر.js" ></script>

بۆ دووبارە کۆکردنەوەی فایلەکانی .less تەنها پاشەکەوتیان بکە و لاپەڕەکەت دووبارە باربکەرەوە. Less.js کۆیان دەکاتەوە و لە کۆگای ناوخۆییدا هەڵیاندەگرێت.

ئەپی ماکی نافەرمی

ئەپی نافەرمی ماک سەیری بەڕێوەبەرایەتییەکانی فایلەکانی .less دەکات و کۆدەکان کۆدەکاتەوە بۆ فایلە ناوخۆییەکان دوای هەر پاشەکەوتکردنی فایلێکی .less کە سەیری دەکرێت.

ئەگەر حەزت لێیە دەتوانیت هەڵبژاردەکان لە ئەپەکەدا بگۆڕیت بۆ بچووککردنەوەی ئۆتۆماتیکی و فایلە کۆکراوەکان لە کام بەڕێوەبەرایەتیدا کۆتایی دێت.

بە LESS دروستکراوە

بۆچی کەمتر؟

چی لەخۆدەگرێت؟

زیاتر فێربە

گۆڕاوەکان

میکسینەکان

ئۆپەراسیۆنەکان

گۆڕاوەکانی بووتستراپ گۆڕاوەکانی کەمتر، بەهاکانیان و ڕێنماییەکانی بەکارهێنان

داسەپاندن و بەستەرەکان

سیستەمی تۆڕ

تایپۆگرافی

خشتەکان

ڕەنگەکانی خۆڵەمێشی

ڕەنگەکانی لەهجە

پێکهاتەکان

دوگمەکان

فۆڕمەکان

فۆڕمی دۆخ و ئاگادارکردنەوە

ناوبەر

دابەزینەکان

یەکەی پاڵەوان

میکسینەکانی بووتستراپ

دەربارەی میکسینەکان

میکسینە بنەڕەتییەکان

میکسینەکانی پارامێتری

بە ئاسانی خۆت زیاد بکە

میکسینەکانی لەگەڵدایە

خزمەتگوزارییەکان

فۆڕمەکان

تایپۆگرافی

سیستەمی تۆڕ

تایبەتمەندیەکانی CSS3

پاشخان و گرادێنتەکان

کۆکردنەوەی Bootstrap بە LESS

ئامرازەکان بۆ کۆمپایڵکردن

گرێ بە makefile

هێڵی فرمان

جاڤاسکڕێپت

ئەپی ماکی نافەرمی

زیاتر لە ئەپی ماک

کرانچ

کۆدکیت

بێ سادە