שימוש ב-LESS עם Bootstrap

התאם אישית והרחיב את Bootstrap עם LESS , מעבד קדם CSS, כדי לנצל את המשתנים, המיקסים ועוד המשמשים לבניית ה-CSS של Bootstrap.

למה פחות?

Bootstrap נוצר עם LESS בבסיסו, שפת גיליון סגנונות דינמית שנוצרה על ידי חברנו הטוב, אלכסיס סלייר . זה הופך את פיתוח CSS מבוסס מערכות למהיר יותר, קל ומהנה יותר.

מה נכלל?

כהרחבה של CSS, LESS כולל משתנים, מיקסינים עבור קטעי קוד הניתנים לשימוש חוזר, פעולות למתמטיקה פשוטה, קינון ואפילו פונקציות צבע.

למד עוד

פחות CSS

בקר באתר הרשמי בכתובת http://lesscss.org/ למידע נוסף.

משתנים

ניהול צבעים וערכי פיקסלים ב-CSS יכול להיות קצת בעייתי, בדרך כלל מלא בהעתקה והדבקה. אבל לא עם LESS - הקצה צבעים או ערכי פיקסלים כמשתנים ושנה אותם פעם אחת.

מיקסינס

שלוש הצהרות רדיוס הגבול האלה שאתה צריך לעשות ב-CSS רגיל? עכשיו הם יורדים לשורה אחת בעזרת mixins, קטעי קוד שתוכלו לעשות בהם שימוש חוזר בכל מקום.

פעולות

הפוך את הרשת, המובילה והגמישה ביותר שלך על ידי ביצוע המתמטיקה תוך כדי תנועה עם פעולות. הכפל, חלק, הוסף והפחת את דרכך לשפיות 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 13 פיקסלים חייבים להיות פיקסלים
@baseFontFamily @sansFontFamily
@baseLineHeight 18 פיקסלים חייבים להיות פיקסלים
@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

Navbar

@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. . clearfix ();
  3. }

מיקסים פרמטריים

מיקסין פרמטרי הוא בדיוק כמו מיקסין בסיסי, אבל הוא מקבל גם פרמטרים (ומכאן השם) עם ערכי ברירת מחדל אופציונליים.

  1. . אלמנט {
  2. . גבול - רדיוס ( 4px );
  3. }

הוסף בקלות משלך

כמעט כל המיקסים של Bootstrap מאוחסנים ב-mixins.less, קובץ .less נפלא המאפשר לך להשתמש ב-mixin בכל אחד מהקבצים .less בערכת הכלים.

אז, קדימה השתמש באלה הקיימים או אל תהסס להוסיף משלך לפי הצורך.

שילובים כלולים

כלי עזר

מיקסין פרמטרים נוֹהָג
.clearfix() אף אחד הוסף לכל הורה כדי לנקות מצופים בתוכו
.tab-focus() אף אחד החל את סגנון המיקוד של Webkit ואת המתאר העגול של Firefox
.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 הגדר את משפחת הגופנים לסריף, ושלוט בגודל, במשקל ובמוביל
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight הגדר את משפחת הגופנים ל-Sans-serif, ושלוט בגודל, במשקל ובמוביל
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight הגדר את משפחת הגופנים ל-monspace, ושלוט בגודל, במשקל ובמוביל

מערכת רשת

מיקסין פרמטרים נוֹהָג
.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 צור שיפוע רקע אופקי חוצה דפדפן
#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 באמצעות כל אחת מהשיטות הללו.

כלים להידור

צומת עם makefile

התקן את מהדר שורת הפקודה LESS, JSHint, Recess ו-uglify-js באופן גלובלי עם npm על ידי הפעלת הפקודה הבאה:

$ npm התקנת -g פחות jshint recess uglify-js

לאחר ההתקנה פשוט הפעל makeמהשורש של ספריית האתחול שלך ואתה מוכן.

בנוסף, אם התקנת את watchr , ייתכן שתפעל make watchכדי שה-bootstrap יבנה מחדש באופן אוטומטי בכל פעם שאתה עורך קובץ ב-bootstrap lib (זה לא נדרש, רק שיטת נוחות).

שורת הפקודה

התקן את כלי שורת הפקודה LESS דרך Node והפעל את הפקודה הבאה:

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

הקפד לכלול --compressבפקודה זו אם אתה מנסה לשמור כמה בתים!

Javascript

הורד את הגרסה העדכנית ביותר של Less.js וכלול את הנתיב אליו (ואת Bootstrap) ב- <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

כדי להדר מחדש את קבצי ה-.less, פשוט שמור אותם וטען מחדש את הדף שלך. Less.js מרכיב אותם ומאחסן אותם באחסון מקומי.

אפליקציית Mac לא רשמית

אפליקציית Mac הלא רשמית צופה בספריות של קבצי .less ומרכיבה את הקוד לקבצים מקומיים לאחר כל שמירה של קובץ .less שנצפה.

אם תרצה, תוכל לשנות את ההעדפות באפליקציה לצמצום אוטומטי ולאיזו ספרייה הקבצים המלוכדים מגיעים.

עוד אפליקציות Mac

לִכסוֹס

Crunch הוא עורך ומהדר פחות שנראה נהדר שנבנה על Adobe Air.

CodeKit

נוצר על ידי אותו בחור כמו אפליקציית Mac הלא רשמית, CodeKit היא אפליקציית Mac שמרכיבה את LESS, SASS, Stylus ו- CoffeeScript.

פשוט

אפליקציית Mac, Linux ו-PC עבור גרירה ושחרור של קבצים פחותים. בנוסף, קוד המקור נמצא ב-GitHub .