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

1. מבנה פרויקט Scss עם בוטסטרפ

גם בגירסא 4 אנחנו עדיין יכולים להשתמש בבוטסטרפ במלואה ישירות דרך טעינת קובץ ה CSS שלהם מה CDN עם השורה הבאה:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

אבל הפעם יש לנו עוד דרך, והיא בניית קבצי ה CSS אצלנו בפרויקט מתוך המקור ה Scss-י שלהם. יצרתי פרויקט דוגמא כזה על גיטהאב כאן:

https://github.com/ynonp/bootstrap4-webinar-demos

הפרויקט הוא פרויקט webpack ועיקר הלוגיקה של הבניה נמצאת בקובץ webpack.config.js. זה תוכן הקובץ:

var path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015"] }
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  }
};

נקודת הכניסה לפרויקט היא הקובץ main.js שבסך הכל טוען את קובץ ה scss הראשי:

import './main.scss';

console.log('hello world');

ולכן עיקר הקוד יהיה בקובץ main.scss. נתחיל עם גירסא פשוטה שמשתמשת ב Bootstrap במלואו באמצעות ה Scss שלו:

$bg-color: orange;

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

body {
  background: $bg-color;
}

.row {
  min-height: 40px;
}

.col {
  outline: 1px solid purple;
}

שורת ה import של scss היא שגורמת להעתקת כל ההגדרות של בוטסטרפ אליי לפרויקט. התוצאה זהה לטעינת קובץ ה css מה CDN שלהם. וזו נקודת ההתחלה שלנו כדי להתאים אישית את הפרויקט ואת אופן השימוש בבוטסטרפ.

2. שימוש רק בחלק מהספריה

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

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

// Optional
@import "node_modules/bootstrap/scss/grid";

קיבלנו CSS הרבה יותר קטן ובלי קלאסים שאנחנו לא צריכים. רשימת קבצי ה Scss שמגיעה עם בוטסטרפ כוללת את ה Partials האופציונאליים הבאים:

_alert.scss
_badge.scss
_breadcrumb.scss
_button-group.scss
_buttons.scss
_card.scss
_carousel.scss
_close.scss
_code.scss
_custom-forms.scss
_dropdown.scss
_forms.scss
_grid.scss
_images.scss
_input-group.scss
_jumbotron.scss
_list-group.scss
_media.scss
_modal.scss
_nav.scss
_navbar.scss
_pagination.scss
_popover.scss
_print.scss
_progress.scss
_reboot.scss
_root.scss
_spinners.scss
_tables.scss
_toasts.scss
_tooltip.scss
_transitions.scss
_type.scss
_utilities.scss

חוץ מהם יש שלושה קבצים שאותם אתם חייבים לייבא וזה מה שראינו קודם:

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

3. שינוי משתנים כדי לשנות את מאפייני הספריה

בקובץ _variables.scss יש לנו רשימה של משתנים ש Bootstrap משתמש בהם לאורך קבצי ה Scss שלהם. אנחנו יכולים לעדכן ערכים לחלק ממשתנים אלה וכך לקבל התנהגות אחרת או מראה אחר.

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

בדוגמא שלנו נוכל להחליף את את ה CSS שכתבנו לשינוי צבע הרקע של העמוד בעדכון ערך למשתנה:

$body-bg: orange;

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

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

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

את הגדרת תפקידי הצבעים:

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

הגדרות עבור התנהגות גלובלית של בוטסטרפ:

$enable-caret:                                true !default;
$enable-rounded:                              true !default;
$enable-shadows:                              false !default;
$enable-gradients:                            false !default;
$enable-transitions:                          true !default;
$enable-prefers-reduced-motion-media-query:   true !default;
$enable-grid-classes:                         true !default;
$enable-pointer-cursor-for-buttons:           true !default;
$enable-print-styles:                         true !default;
$enable-responsive-font-sizes:                false !default;
$enable-validation-icons:                     true !default;
$enable-deprecation-messages:                 true !default;

אורך קובץ המשתנים הוא מעל אלף שורות כך שדי בטוח שתצליחו למצוא משתנה שישפיע על ההתנהגות שאתם צריכים.

4. הוספת Theme לפרויקט

פרויקט Bootswatch לקח את הרעיון הזה ויצר התאמה אישית לצבעים לפי ערכות צבעים. דף הפרויקט בגיטהאב לתיעוד ודוגמאות:

https://github.com/thomaspark/bootswatch

ניקח לדוגמא קטע מתוך קובץ הגדרת המשתנים _variables.scss של ערכת הצבעים darkly:

$primary:       $blue !default;
$secondary:     $gray-700 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-800 !default;
$dark:          $gray-500 !default;

בכך שהם נתנו ערך אחר למשתנה $light הם יצרו מראה אחר של הדף כך שהכל יוצא יותר כהה.

או בדוגמא אחרת עבור הדיאלוגים המודאלים:

// Modals

$modal-content-bg:                  $gray-800 !default;
$modal-content-border-color:        $gray-700 !default;

$modal-header-border-color:         $gray-700 !default;

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

5. יצירת אלמנט מותאם אישית לפי ה Theme הנוכחי

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

הפונקציה theme-color למשל תיקח צבע מה theme הנוכחי לפי התפקיד שלו. נשתמש בה כדי לכתוב טקסט עם קונטרסט בתיבה:

.row:nth-child(1) .col {
  background: theme-color('primary');
  color: color-yiq(theme-color('secondary'));
}

אני משתמש בצבע המרכזי של ה Theme בתור צבע רקע של התיבה, ובפונקציה color-yiq כדי לקבל צבע עם קונטרסט טוב בשביל הטקסט. פונקציה זו תחזיר צבע לבן או שחור לפי מה שיסתדר יותר טוב עם הצבע שהעברתם לה. כך אם אשנה את ה theme-color הראשי לצבע בהיר למשל:

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

באופן אוטומטי הטבלא שלי תתעדכן וצבע הרקע יהפוך לצבע הבהיר וצבע הטקסט יהפוך לאפור כהה (הצבע #212529).

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