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

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

بۆچی کەمتر؟

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

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

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

زیاتر فێربە

کەمتر CSS

بۆ زانیاری زیاتر سەردانی ماڵپەڕی فەرمی بکەن لە 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

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

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

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

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

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

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

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

نزیکەی هەموو میکسینەکانی 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 بەکاربهێنێت
.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 دروستکردنی گرادێنتێکی پاشبنەمای ئاسۆیی 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 و JSHint و Recess و uglify-js بە شێوەیەکی جیهانی بە npm دابمەزرێنە بە جێبەجێکردنی ئەم فرمانەی خوار��وە:

$ npm دامەزراندن -g کەمتر jshint recess 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 ی نایاب و سەرنجڕاکێشە کە لەسەر ئەدۆبی ئایر دروستکراوە.

کۆدکیت

لەلایەن هەمان کابرای ئەپی نافەرمی ماکەوە دروستکراوە، CodeKit ئەپێکی ماکە کە LESS و SASS و Stylus و CoffeeScript کۆدەکاتەوە.

بێ سادە

ئەپی ماک و لینوکس و کۆمپیوتەر بۆ کۆکردنەوەی فایلەکانی LESS ڕاکێشان و دابەزاندن. لەگەڵ ئەوەشدا، کۆدی سەرچاوە لە GitHub دایە .