ניצן LESS מיט Bootstrap
קאַסטאַמייז און פאַרברייטערן Bootstrap מיט LESS , אַ CSS פּרעפּראָסעססאָר, צו נוצן די וועריאַבאַלז, מיקסינס און מער געניצט צו בויען Bootstrap's CSS.
געבויט מיט ווייניקער
פארוואס ווייניקער?
באָאָטסטראַפּ איז געמאכט מיט ווייניקער אין זיין האַרץ, אַ דינאַמיש סטילעשעט שפּראַך באשאפן דורך אונדזער גוט פרייַנד, אַלעקסיס סעלליער . עס מאכט דעוועלאָפּינג סיסטעמען-באזירט CSS פאַסטער, גרינגער און מער שפּאַס.
וואָס איז אַרייַנגערעכנט?
ווי אַ פאַרלענגערונג פון CSS, LESS כולל וועריאַבאַלז, מיקסינס פֿאַר ריוזאַבאַל קאָד סניפּאַץ, אַפּעריישאַנז פֿאַר פּשוט מאַט, נעסטינג און אפילו קאָליר פאַנגקשאַנז.
וועריאַבאַלז
אָנפירונג פֿאַרבן און פּיקסעל וואַלועס אין CSS קענען זיין אַ ביסל ווייטיקדיק, יוזשאַוואַלי פול פון קאָפּיע און פּאַפּ. ניט מיט ווייניקער כאָטש - באַשטימען פארבן אָדער פּיקסעל וואַלועס ווי וועריאַבאַלז און טוישן זיי אַמאָל.
מיקסינס
די דריי גרענעץ-ראַדיוס דעקלעריישאַנז איר דאַרפֿן צו מאַכן אין רעגולער אָל' CSS? איצט זיי זענען אַראָפּ צו איין שורה מיט די הילף פון מיקסינס, סניפּאַץ פון קאָד איר קענען רייוס ערגעץ.
אָפּעראַטיאָנס
מאַכן דיין גריד, לידינג און מער סופּער פלעקסאַבאַל דורך מאַכן די מאַט אויף די פליען מיט אַפּעריישאַנז. מערן, צעטיילן, לייגן און אַראָפּרעכענען דיין וועג צו CSS סייכל.
באָאָטסטראַפּ וועריאַבאַלז ווייניקער וועריאַבאַלז, זייער וואַלועס און באַניץ גיידליינז
כייפּערלינגקס
@linkColor |
#08c | פעליקייַט לינק טעקסט קאָליר | |
@linkColorHover |
darken(@linkColor, 15%) |
פעליקייַט לינק טעקסט האָווער קאָליר |
גריד סיסטעם
@gridColumns |
12 |
@gridColumnWidth |
60 פּקס |
@gridGutterWidth |
20 פּקס |
@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 |
#עיי | |
@white |
#פף |
אַקצענט פארבן
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
קאַמפּאָונאַנץ
קנעפּלעך
@primaryButtonBackground |
@linkColor |
Forms
@placeholderText |
@grayLight |
נאַוובאַר
@navbarHeight |
40 פּקס | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
פאָרעם שטאַטן און אַלערץ
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#פ2דעדע | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
באָאָצטראַפּ מיקסינס
וועגן מיקסינס
יקערדיק מיקסינס
א יקערדיק מיקסין איז יסענשאַלי אַ אַרייַננעמען אָדער אַ פּאַרטיייש פֿאַר אַ סניפּאַט פון CSS. זיי זענען געשריבן פּונקט ווי אַ CSS קלאַס און קענען זיין גערופן ערגעץ.
- . עלעמענט {
- . קלירפיקס ();
- }
פּאַראַמעטריק מיקסינס
א פּאַראַמעטריק מיקסין איז פּונקט ווי אַ יקערדיק מיקסין, אָבער עס אויך אַקסעפּץ פּאַראַמעטערס (דערפאר די נאָמען) מיט אַפּשאַנאַל פעליקייַט וואַלועס.
- . עלעמענט {
- . גרענעץ - ראַדיוס ( קסנומקספּקס );
- }
לייכט לייגן דיין אייגענע
קימאַט אַלע פון באָאָטסטראַפּ ס מיקסינס זענען סטאָרד אין מיקסינס.לעסס, אַ ווונדערלעך נוצן .לעסס טעקע וואָס ינייבאַלז איר צו נוצן אַ מיקסין אין קיין פון די .לעסס טעקעס אין די טאָאָלקיט.
אַזוי, גיין פאָרויס און נוצן די יגזיסטינג אָנעס אָדער פילן פריי צו לייגן דיין אייגענע ווי איר דאַרפֿן.
אַרייַנגערעכנט מיקסינס
יוטילאַטיז
| מיקסין | פּאַראַמעטערס | באַניץ |
|---|---|---|
.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") |
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 % ברייט רינדער |
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 און י פּליינז |
.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 |
שאַפֿן אַ קרייַז-בלעטערער האָריזאָנטאַל הינטערגרונט גראַדיענט |
#gradient > .directional() |
@startColor, @endColor, @deg |
שאַפֿן אַ קרייַז-בלעטערער דירעקטיאָנאַל הינטערגרונט גראַדיענט |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
שאַפֿן אַ קרייז-בלעטערער דריי-קאָליר הינטערגרונט גראַדיענט |
#gradient > .radial() |
@innerColor, @outerColor |
שאַפֿן אַ קרייַז-בלעטערער ריידיאַל הינטערגרונט גראַדיענט |
#gradient > .striped() |
@color, @angle |
שאַפֿן אַ קרייַז-בלעטערער סטרייפּט הינטערגרונט גראַדיענט |
#gradientBar() |
@primaryColor, @secondaryColor |
געוויינט פֿאַר קנעפּלעך צו באַשטימען אַ גראַדיענט און אַ ביסל דאַרקער גרענעץ |
קאַמפּיילינג באָאָצטראַפּ מיט ווייניקער
מכשירים פֿאַר קאַמפּיילינג
נאָדע מיט מאַכן טעקע
ינסטאַלירן די LESS באַפֿעלן שורה קאַמפּיילער און uglify-js גלאָובאַלי מיט npm דורך לויפן די פאלגענדע באַפֿעל:
$ npm ינסטאַלירן -g ווייניקער uglify-js
אַמאָל אינסטאַלירן, נאָר לויפן makeפֿון דער וואָרצל פון דיין באָאָטסטראַפּ וועגווייַזער און איר זענט גרייט.
אַדדיטיאָנאַללי, אויב איר האָבן וואַטשער אינסטאַלירן, איר קען לויפן make watchצו האָבן באָאָטסטראַפּ אויטאָמאַטיש ריבילט יעדער מאָל איר רעדאַגירן אַ טעקע אין די באָאָטסטראַפּ ליב (דאָס איז נישט פארלאנגט, נאָר אַ קאַנוויניאַנס אופֿן).
באַפֿעלן שורה
ינסטאַלירן די LESS באַפֿעלן שורה געצייַג דורך Node און לויפן די פאלגענדע באַפֿעל:
$ lessc ./lib/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 .