דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

סאס

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

בעמוד זה

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

מבנה הקובץ

במידת האפשר, הימנע משינוי קבצי הליבה של Bootstrap. עבור Sass, זה אומר ליצור גיליון סגנונות משלך שמייבא את Bootstrap כדי שתוכל לשנות ולהרחיב אותו. בהנחה שאתה משתמש במנהל חבילות כמו npm, יהיה לך מבנה קובץ שנראה כך:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

אם הורדת את קובצי המקור שלנו ואינך משתמש במנהל חבילות, תרצה ליצור ידנית משהו דומה למבנה הזה, תוך שמירה על קבצי המקור של Bootstrap נפרדים משלך.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

מייבא

ב- שלך custom.scss, תייבא את קובצי המקור Sass של Bootstrap. יש לך שתי אפשרויות: לכלול את כל Bootstrap, או לבחור את החלקים שאתה צריך. אנו מעודדים את האחרונים, אם כי שים לב שיש כמה דרישות ותלות בין הרכיבים שלנו. תצטרך גם לכלול קצת JavaScript עבור התוספים שלנו.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

עם ההגדרה הזו, אתה יכול להתחיל לשנות כל אחד מהמשתנים והמפות של Sass ב- custom.scss. אתה יכול גם להתחיל להוסיף חלקים של Bootstrap מתחת // Optionalלסעיף לפי הצורך. אנו ממליצים להשתמש בערימת הייבוא ​​המלאה bootstrap.scssמהקובץ שלנו כנקודת ההתחלה שלך.

ברירות מחדל משתנות

כל משתנה Sass ב-Bootstrap כולל את !defaultהדגל המאפשר לך לעקוף את ערך ברירת המחדל של המשתנה ב-Sass משלך מבלי לשנות את קוד המקור של Bootstrap. העתק והדבק משתנים לפי הצורך, שנה את הערכים שלהם והסר את !defaultהדגל. אם משתנה כבר הוקצה, אז הוא לא יוקצה מחדש על ידי ערכי ברירת המחדל ב-Bootstrap.

תוכל למצוא את הרשימה המלאה של המשתנים של Bootstrap ב scss/_variables.scss. משתנים מסוימים מוגדרים ל- null, משתנים אלה אינם מוציאים את המאפיין אלא אם כן הם מוחקים בתצורה שלך.

עקיפות משתנים חייבות לבוא לאחר ייבוא ​​הפונקציות שלנו, אך לפני שאר הייבוא.

להלן דוגמה שמשנה את ה- background-colorו colorעבור <body>בעת ייבוא ​​והידור Bootstrap באמצעות npm:

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

חזור לפי הצורך עבור כל משתנה ב-Bootstrap, כולל האפשרויות הגלובליות למטה.

התחל עם Bootstrap דרך npm עם פרויקט ההתחלה שלנו! עבור אל מאגר התבניות twbs/bootstrap-npm-starter כדי לראות כיצד לבנות ולהתאים אישית את Bootstrap בפרויקט npm משלך. כולל מהדר Sass, Autoprefixer, Stylelint, PurgeCSS וסמלים של Bootstrap.

מפות ולופים

Bootstrap כולל קומץ של מפות Sass, צמדי ערכים מרכזיים המקלים על יצירת משפחות של CSS קשורות. אנו משתמשים במפות Sass עבור הצבעים שלנו, נקודות השבירה של הרשת ועוד. בדיוק כמו משתני Sass, כל מפות Sass כוללות את !defaultהדגל וניתן לעקוף ולהרחיב.

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

שנה מפה

כל המשתנים $theme-colorsבמפה מוגדרים כמשתנים עצמאיים. כדי לשנות צבע קיים $theme-colorsבמפה שלנו, הוסף את הדברים הבאים לקובץ Sass המותאם אישית שלך:

$primary: #0074d9;
$danger: #ff4136;

בהמשך, משתנים אלה מוגדרים $theme-colorsבמפה של Bootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

הוסף למפה

הוסף צבעים חדשים ל- $theme-colors, או לכל מפה אחרת, על-ידי יצירת מפת Sass חדשה עם הערכים המותאמים אישית שלך ומיזוגה עם המפה המקורית. במקרה זה, ניצור $custom-colorsמפה חדשה ונמזג אותה עם $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

הסר מהמפה

כדי להסיר צבעים מ- $theme-colors, או מכל מפה אחרת, השתמש ב- map-remove. שים לב שעליך להכניס $theme-colorsבין הדרישות שלנו מיד לאחר הגדרתו ב variablesולפני השימוש בו ב maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

מפתחות נדרשים

Bootstrap מניח את נוכחותם של כמה מפתחות ספציפיים בתוך מפות Sass כפי שהשתמשנו ולהרחיב אותם בעצמנו. בעת התאמה אישית של המפות הכלולות, אתה עלול להיתקל בשגיאות כאשר נעשה שימוש במפתח ספציפי של מפת Sass.

לדוגמה, אנו משתמשים במקשים primary, success, ו- מ עבור קישורים, לחצנים ומצבי טופס. החלפת הערכים של המפתחות הללו לא אמורה להציג בעיות, אך הסרתם עלולה לגרום לבעיות הידור של Sass. במקרים אלה, תצטרך לשנות את קוד Sass שעושה שימוש בערכים אלה.danger$theme-colors

פונקציות

צבעים

לצד מפות Sass שברשותנו , ניתן להשתמש בצבעי ערכת נושא גם כמשתנים עצמאיים, כמו $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

אתה יכול להבהיר או להכהות צבעים עם Bootstrap's tint-color()ופונקציות shade-color(). פונקציות אלו יערבבו צבעים עם שחור או לבן, בניגוד לפונקציות המקוריות והפונקציות של Sass lighten()אשר darken()ישנו את הבהירות בכמות קבועה, שלעתים קרובות לא מובילה לאפקט הרצוי.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

בפועל, תקרא לפונקציה ותעביר את פרמטרי הצבע והמשקל.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ניגודיות צבע

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

כדי לעזור בזה, כללנו את color-contrastהפונקציה ב-Bootstrap. הוא משתמש באלגוריתם יחס הניגודיות של WCAG לחישוב ספי ניגודיות המבוססים על זוהר יחסי בחלל sRGBצבע כדי להחזיר אוטומטית צבע ניגודיות בהיר ( #fff), כהה ( #212529) או שחור ( #000) בהתבסס על צבע הבסיס שצוין. פונקציה זו שימושית במיוחד עבור mixins או לולאות שבהן אתה יוצר מחלקות מרובות.

לדוגמה, כדי ליצור דוגמיות צבע $theme-colorsמהמפה שלנו:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

זה יכול לשמש גם לצרכי ניגודיות חד פעמיים:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

אתה יכול גם לציין צבע בסיס עם פונקציות מפת הצבע שלנו:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

בריחה מ-SVG

אנו משתמשים escape-svgבפונקציה כדי להימלט מה- <, >והתווים #עבור תמונות רקע SVG. בעת שימוש escape-svgבפונקציה, יש לצטט כתובות URI של נתונים.

פונקציות הוספה וחיסור

אנו משתמשים בפונקציות addו subtractכדי לעטוף את calcפונקציית ה-CSS. המטרה העיקרית של פונקציות אלו היא למנוע שגיאות כאשר 0ערך "יחידה" מועבר calcלביטוי. ביטויים כמו calc(10px - 0)יחזירו שגיאה בכל הדפדפנים, למרות שהם נכונים מבחינה מתמטית.

דוגמה שבה החשבון תקף:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

דוגמה שבה ה-calc אינו חוקי:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

מיקסינס

בספרייה שלנו scss/mixins/יש המון מיקסים שמניעים חלקים של Bootstrap וניתן להשתמש בהם גם בפרויקט משלך.

ערכות צבעים

שילוב קיצור עבור prefers-color-schemeשאילתת המדיה זמין עם תמיכה עבור light, dark, וערכות צבעים מותאמות אישית.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}