ניצן LESS מיט Bootstrap

קאַסטאַמייז און פאַרברייטערן Bootstrap מיט LESS , אַ CSS פּרעפּראָסעססאָר, צו נוצן די וועריאַבאַלז, מיקסינס און מער געניצט צו בויען Bootstrap's CSS.

פארוואס ווייניקער?

באָאָטסטראַפּ איז געמאכט מיט ווייניקער אין זיין האַרץ, אַ דינאַמיש סטילעשעט שפּראַך באשאפן דורך אונדזער גוט פרייַנד, אַלעקסיס סעלליער . עס מאכט דעוועלאָפּינג סיסטעמען-באזירט CSS פאַסטער, גרינגער און מער שפּאַס.

וואָס איז אַרייַנגערעכנט?

ווי אַ פאַרלענגערונג פון CSS, LESS כולל וועריאַבאַלז, מיקסינס פֿאַר ריוזאַבאַל קאָד סניפּאַץ, אַפּעריישאַנז פֿאַר פּשוט מאַט, נעסטינג און אפילו קאָליר פאַנגקשאַנז.

לערן מער

באַזוכן די באַאַמטער וועבזייטל http://lesscss.org/ צו לערנען מער.

וועריאַבאַלז

אָנפירונג פֿאַרבן און פּיקסעל וואַלועס אין CSS קענען זיין אַ ביסל ווייטיקדיק, יוזשאַוואַלי פול פון קאָפּיע און פּאַפּ. ניט מיט ווייניקער כאָטש - באַשטימען פארבן אָדער פּיקסעל וואַלועס ווי וועריאַבאַלז און טוישן זיי אַמאָל.

מיקסינס

די דריי גרענעץ-ראַדיוס דעקלעריישאַנז איר דאַרפֿן צו מאַכן אין רעגולער אָל' CSS? איצט זיי זענען אַראָפּ צו איין שורה מיט די הילף פון מיקסינס, סניפּאַץ פון קאָד איר קענען רייוס ערגעץ.

אָפּעראַטיאָנס

מאַכן דיין גריד, לידינג און מער סופּער פלעקסאַבאַל דורך מאַכן די מאַט אויף די פליען מיט אַפּעריישאַנז. מערן, צעטיילן, לייגן און אַראָפּרעכענען דיין וועג צו CSS סייכל.

סקאַפאַלדינג און לינקס

`@bodyBackground`	`@white`	בלאַט הינטערגרונט פֿאַרב
`@textColor`	`@grayDark`	פעליקייַט טעקסט קאָליר פֿאַר די גאנצע גוף, כעדינגז און מער
`@linkColor`	`#08c`	פעליקייַט לינק טעקסט קאָליר
`@linkColorHover`	`darken(@linkColor, 15%)`	פעליקייַט לינק טעקסט האָווער קאָליר

גריד סיסטעם

`@gridColumns`	12
`@gridColumnWidth`	60 פּקס
`@gridGutterWidth`	20 פּקס
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

טיפּאָגראַפי

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@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`	#עיי
`@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`

Forms

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

פאָרעם שטאַטן און אַלערץ

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#פ2דעדע
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

נאַוובאַר

`@navbarHeight`	40 פּקס
`@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 קלאַס און קענען זיין גערופן ערגעץ.

. עלעמענט {
  . קלירפיקס ();
}

פּאַראַמעטריק מיקסינס

א פּאַראַמעטריק מיקסין איז פּונקט ווי אַ יקערדיק מיקסין, אָבער עס אויך אַקסעפּץ פּאַראַמעטערס (דערפאר די נאָמען) מיט אַפּשאַנאַל פעליקייַט וואַלועס.

. עלעמענט {
  . גרענעץ - ראַדיוס ( קסנומקספּקס );
}

לייכט לייגן דיין אייגענע

קימאַט אַלע פון באָאָטסטראַפּ ס מיקסינס זענען סטאָרד אין מיקסינס.לעסס, אַ ווונדערלעך נוצן .לעסס טעקע וואָס ינייבאַלז איר צו נוצן אַ מיקסין אין קיין פון די .לעסס טעקעס אין די טאָאָלקיט.

אַזוי, גיין פאָרויס און נוצן די יגזיסטינג אָנעס אָדער פילן פריי צו לייגן דיין אייגענע ווי איר דאַרפֿן.

אַרייַנגערעכנט מיקסינס

יוטילאַטיז

מיקסין	פּאַראַמעטערס	באַניץ
`.clearfix()`	גאָרניט	לייג צו קיין פאָטער צו ויסמעקן פלאַץ ין
`.tab-focus()`	גאָרניט	צולייגן די וועבקיט פאָקוס סטיל און אַ קייַלעכיק פירעפאָקס אַוטליין
`.center-block()`	גאָרניט	אַוטאָ צענטער אַ בלאָק-מדרגה עלעמענט ניצן`margin: auto`
`.ie7-inline-block()`	גאָרניט	ניצן אין אַדישאַן צו רעגולער `display: inline-block`צו באַקומען IE7 שטיצן
`.size()`	`@height @width`	געשווינד שטעלן די הייך און ברייט אויף איין שורה
`.square()`	`@size`	בויען אויף `.size()`צו שטעלן די ברייט און הייך ווי די זעלבע ווערט
`.opacity()`	`@opacity`	שטעלן, אין גאַנץ נומערן, די אָופּאַסאַטי פּראָצענט (למשל, "50" אָדער "75")

Forms

מיקסין	פּאַראַמעטערס	באַניץ
`.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`	באַשטעטיק שריפֿט משפּחה צו סעריף, און קאָנטראָלירן גרייס, וואָג און לידינג
`#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 שפאלטן און רענטגענ פּיקסעל ברייט רינדערנס
`#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 און י פּליינז
`.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`	געוויינט פֿאַר קנעפּלעך צו באַשטימען אַ גראַדיענט און אַ ביסל דאַרקער גרענעץ

באַמערקונג: אויב איר פאָרלייגן אַ ציען בעטן צו GitHub מיט מאַדאַפייד CSS, איר מוזן ריקאָמפּילע די CSS דורך קיין פון די מעטהאָדס.

מכשירים פֿאַר קאַמפּיילינג

נאָדע מיט מאַכן טעקע

ינסטאַלירן די LESS באַפֿעלן שורה קאַמפּיילער, JSHint, Recess און uglify-js גלאָובאַלי מיט npm דורך לויפן די פאלגענדע באַפֿעל:

$ npm install -g less jshint reces uglify-js

אַמאָל אינסטאַלירן, נאָר לויפן makeפֿון דער וואָרצל פון דיין באָאָטסטראַפּ וועגווייַזער און איר זענט גרייט.

אַדדיטיאָנאַללי, אויב איר האָבן וואַטשער אינסטאַלירן, איר קען לויפן make watchצו האָבן באָאָטסטראַפּ אויטאָמאַטיש ריבילט יעדער מאָל איר רעדאַגירן אַ טעקע אין די באָאָטסטראַפּ ליב (דאָס איז נישט פארלאנגט, נאָר אַ קאַנוויניאַנס אופֿן).

באַפֿעלן שורה

ינסטאַלירן די LESS באַפֿעלן שורה געצייַג דורך Node און לויפן די פאלגענדע באַפֿעל:

$ lessc ./less/bootstrap.less > bootstrap.css

זייט זיכער צו אַרייַננעמען --compressאין דעם באַפֿעל אויב איר פּרובירן צו ראַטעווען עטלעכע ביטעס!

Javascript

אראפקאפיע די לעצטע Less.js און אַרייַננעמען דעם דרך צו עס (און באָאָטסטראַפּ) אין די <head>.

<לינק rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

צו רעקאָמפּילע די .לעסס טעקעס, נאָר ראַטעווען זיי און רילאָוד דיין בלאַט. Less.js קאַמפּיילז זיי און סטאָרז זיי אין היגע סטאָרידזש.

אַנאַפישאַל מעק אַפּ

די אַנאַפישאַל מעק אַפּ וואַטשיז דיירעקטעריז פון .לעסס טעקעס און קאַמפּיילז די קאָד צו היגע טעקעס נאָך יעדער שפּאָרן פון אַ וואָטשט .לעסס טעקע.

אויב איר ווילט, איר קענען באַשטימען פּרעפֿערענצן אין די אַפּ פֿאַר אָטאַמאַטיק מינאַפייינג און אין וואָס וועגווייַזער די קאַמפּיילד טעקעס ענדיקן.

געבויט מיט ווייניקער

פארוואס ווייניקער?

וואָס איז אַרייַנגערעכנט?

לערן מער

וועריאַבאַלז

מיקסינס

אָפּעראַטיאָנס

באָאָטסטראַפּ וועריאַבאַלז ווייניקער וועריאַבאַלז, זייער וואַלועס און באַניץ גיידליינז

סקאַפאַלדינג און לינקס

גריד סיסטעם

טיפּאָגראַפי

טישן

גרייסקאַלע פארבן

אַקצענט פארבן

קאַמפּאָונאַנץ

קנעפּלעך

Forms

פאָרעם שטאַטן און אַלערץ

נאַוובאַר

דראָפּדאָוונס

העלד אַפּאַראַט

באָאָצטראַפּ מיקסינס

וועגן מיקסינס

יקערדיק מיקסינס

פּאַראַמעטריק מיקסינס

לייכט לייגן דיין אייגענע

אַרייַנגערעכנט מיקסינס

יוטילאַטיז

Forms

טיפּאָגראַפי

גריד סיסטעם

CSS3 פּראָפּערטיעס

באַקגראַונדז און גראַדיאַנץ

קאַמפּיילינג באָאָצטראַפּ מיט ווייניקער

מכשירים פֿאַר קאַמפּיילינג

נאָדע מיט מאַכן טעקע

באַפֿעלן שורה

Javascript

אַנאַפישאַל מעק אַפּ

מער מעק אַפּפּס

כראָמטשען

קאָדעקיט

סימפּלאַס