ניצן LESS מיט Bootstrap

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

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

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

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

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

לערן מער

ווייניקער CSS

באַזוכן די באַאַמטער וועבזייטל 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 קלאַס און קענען זיין גערופן ערגעץ.

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

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

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

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

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

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

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

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

יוטילאַטיז

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

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

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

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

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

כראָמטשען

Crunch איז אַ ווייניקער רעדאַקטאָר און קאַמפּיילער געבויט אויף אַדאָובי לופט.

קאָדעקיט

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

סימפּלאַס

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