טימינג באָאָצטראַפּ

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

הקדמה

אין Bootstrap 3, טימינג איז לאַרגעלי געטריבן דורך וועריאַבאַל אָוווערריידז אין ווייניקער, מנהג CSS און אַ באַזונדער טעמע סטילעשעעט וואָס מיר ינקלודעד אין אונדזער distטעקעס. מיט עטלעכע מי, איר קענען גאָר רידיזיין די קוק פון Bootstrap 3 אָן רירנדיק די האַרץ טעקעס. Bootstrap 4 גיט אַ באַקאַנט, אָבער אַ ביסל אַנדערש צוגאַנג.

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

סאַס

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

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

מיט דעם סעטאַפּ אין פּלאַץ, איר קענען אָנהייבן צו מאָדיפיצירן קיין פון די סאַסס וועריאַבאַלז און מאַפּס אין דיין custom.scss. איר קענט אויך אָנהייבן צו לייגן פּאַרץ פון Bootstrap אונטער די // Optionalאָפּטיילונג ווי דארף. מיר פֿאָרשלאָגן ניצן די פול אַרייַנפיר אָנלייגן פון אונדזער bootstrap.scssטעקע ווי דיין סטאַרטינג פונט.

וואַריאַבלע דיפאָלץ

יעדער Sass בייַטעוודיק אין Bootstrap כולל די !defaultפאָן וואָס אַלאַוז איר צו אָווועררייד די פעליקייַט ווערט פון די בייַטעוודיק אין דיין אייגענע Sass אָן מאָדיפיצירן די מקור קאָד פון Bootstrap. נאָכמאַכן און פּאַפּ וועריאַבאַלז ווי דארף, מאָדיפיצירן זייער וואַלועס און באַזייַטיקן די !defaultפאָן. אויב אַ בייַטעוודיק איז שוין אַסיינד, עס וועט נישט זיין שייַעך-אַסיינד דורך די פעליקייַט וואַלועס אין Bootstrap.

איר וועט געפֿינען די גאַנץ רשימה פון באָאָטסטראַפּ ס וועריאַבאַלז אין scss/_variables.scss. עטלעכע וועריאַבאַלז זענען באַשטימט צו null, די וועריאַבאַלז טאָן ניט רעזולטאַט די פאַרמאָג סייַדן זיי זענען אָווועררידאַן אין דיין קאַנפיגיעריישאַן.

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

דאָ ס אַ ביישפּיל וואָס ענדערונגען די background-colorאון colorפֿאַר די <body>ווען ימפּאָרטינג און קאַמפּיילינג Bootstrap דורך npm:

@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/mixins";

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

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

מאַפּס און לופּס

Bootstrap 4 כולל אַ האַנדפול פון סאַס מאַפּס, שליסל ווערט פּערז וואָס מאַכן עס גרינגער צו דזשענערייט משפחות פון פֿאַרבונדענע CSS. מיר נוצן Sass מאַפּס פֿאַר אונדזער פארבן, גריד ברעאַקפּאָינץ, און מער. פּונקט ווי סאַס וועריאַבאַלז, אַלע סאַס מאַפּס אַרייַננעמען די !defaultפאָן און קענען זיין אָווועררידאַן און עקסטענדעד.

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

מאָדיפיצירן מאַפּע

צו מאָדיפיצירן אַ יגזיסטינג קאָליר אין אונדזער $theme-colorsמאַפּע, לייג די פאלגענדע צו דיין מנהג Sass טעקע:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

לייג צו מאַפּע

צו לייגן אַ נייַע קאָליר צו $theme-colors, לייג די נייַע שליסל און ווערט:

$theme-colors: (
  "custom-color": #900
);

אַראָפּנעמען פון מאַפּע

צו באַזייַטיקן פארבן פון $theme-colors, אָדער קיין אנדערע מאַפּע, נוצן map-remove. זיין אַווער אַז איר מוזן אַרייַנלייגן עס צווישן אונדזער רעקווירעמענץ און אָפּציעס:

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

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

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

פארלאנגט שליסלען

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

פֿאַר בייַשפּיל, מיר נוצן די primary, success, און dangerשליסלען פֿון $theme-colorsפֿאַר לינקס, קנעפּלעך און פאָרעם שטאַטן. ריפּלייסינג די וואַלועס פון די שליסלען זאָל נישט פאָרשטעלן קיין ישוז, אָבער רימוווינג זיי קען פאַרשאַפן סאַסס זאַמלונג ישוז. אין די ינסטאַנסיז, איר דאַרפֿן צו מאָדיפיצירן די Sass קאָד וואָס ניצט די וואַלועס.

פאַנגקשאַנז

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

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

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

מיר אויך האָבן אן אנדער פונקציע צו באַקומען אַ באַזונדער קאָליר פון די $theme-colorsמאַפּע. נעגאַטיוו לעוועלס וואַלועס וועט לייטאַן די קאָליר, בשעת העכער לעוועלס וועט דאַרקאַן.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

אין פיר, איר'ד רופן די פֿונקציע און פאָרן אין צוויי פּאַראַמעטערס: די נאָמען פון די קאָליר פון $theme-colors(למשל, ערשטיק אָדער געפאַר) און אַ נומעריק מדרגה.

.custom-element {
  color: theme-color-level(primary, -10);
}

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

קאָליר קאַנטראַסט

אַן נאָך פונקציע וואָס מיר אַרייַננעמען אין Bootstrap איז די קאָליר קאַנטראַסט פונקציע, color-yiq. עס ניצט די YIQ קאָליר פּלאַץ צו אויטאָמאַטיש צוריקקומען אַ ליכט ( #fff) אָדער טונקל ( #111) קאַנטראַסט קאָליר באזירט אויף די ספּעסיפיעד באַזע קאָליר. די פֿונקציע איז ספּעציעל נוציק פֿאַר מיקסינס אָדער לופּס ווו איר דזשענערייט קייפל קלאסן.

פֿאַר בייַשפּיל, צו דזשענערייט קאָליר סוואַטשיז פון אונדזער $theme-colorsמאַפּע:

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

עס קענען אויך זיין געניצט פֿאַר איין-אַוועק קאַנטראַסט באדערפענישן:

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

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

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

אַנטלויפן SVG

מיר נוצן די escape-svgפונקציע צו אַנטלויפן די <, >און #אותיות פֿאַר SVG הינטערגרונט בילדער. די אותיות דאַרפֿן צו זיין אנטרונען צו רעכט ופפירן די הינטערגרונט בילדער אין IE. ווען איר נוצן די escape-svgפונקציע, דאַטן URIs מוזן זיין ציטירטן.

לייג און אַראָפּרעכענען פאַנגקשאַנז

מיר נוצן די addאון subtractפאַנגקשאַנז צו ייַנוויקלען די CSS calcפונקציע. דער ערשטיק ציל פון די פאַנגקשאַנז איז צו ויסמיידן ערראָרס ווען אַ "וניטלעסס" 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);
}

בייַשפּיל ווו די קאַלק איז פאַרקריפּלט:

$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);
}

פּשוט אָפּציעס

קאַסטאַמייז Bootstrap 4 מיט אונדזער געבויט-אין מנהג וועריאַבאַלז טעקע און לייכט באַשטימען גלאבאלע CSS פּרעפֿערענצן מיט נייַע $enable-*Sass וועריאַבאַלז. אָווועררייד די ווערט פון אַ בייַטעוודיק און ריקאָמפּילע מיט npm run testווי דארף.

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

פאַרב

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

אַלע פארבן

כל פֿאַרבן בנימצא אין Bootstrap 4, זענען בנימצא ווי סאַסס וועריאַבאַלז און אַ סאַסס מאַפּע אין scss/_variables.scssטעקע. דאָס וועט זיין יקספּאַנדיד אין סאַבסאַקוואַנט מינערווערטיק ריליסיז צו לייגן נאָך שיידז, פיל ווי די גרייסקאַלע פּאַליטרע מיר שוין אַרייַננעמען.

דאָ ס ווי איר קענען נוצן די אין דיין Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

קאָליר נוצן קלאסן זענען אויך בנימצא פֿאַר באַשטעטיקן colorאון background-color.

טעמע פארבן

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

גרוי

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

ין scss/_variables.scss, איר וועט געפֿינען Bootstrap ס קאָליר וועריאַבאַלז און Sass מאַפּע. דאָ ס אַ ביישפּיל פון די $colorsSass מאַפּע:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

לייג, אַראָפּנעמען אָדער מאָדיפיצירן וואַלועס אין דער מאַפּע צו דערהייַנטיקן ווי זיי זענען געניצט אין פילע אנדערע קאַמפּאָונאַנץ. צום באַדויערן אין דער צייט, ניט יעדער קאָמפּאָנענט ניצט דעם Sass מאַפּע. צוקונפֿט דערהייַנטיקונגען וועלן שטרעבן צו פֿאַרבעסערן דעם. ביז דעמאָלט, פּלאַן צו נוצן די ${color}וועריאַבאַלז און דעם Sass מאַפּע.

קאַמפּאָונאַנץ

פילע פון ​​באָאָטסטראַפּ ס קאַמפּאָונאַנץ און יוטילאַטיז זענען געבויט מיט @eachלופּס וואָס יטערייט איבער אַ Sass מאַפּע. דאָס איז ספּעציעל נוציק פֿאַר דזשענערייטינג וועריאַנץ פון אַ קאָמפּאָנענט דורך אונדזער $theme-colorsאון קריייטינג אָפּרופיק וועריאַנץ פֿאַר יעדער ברייקפּוינט. ווען איר קאַסטאַמייז די סאַס מאַפּס און ריקאָמפּילע, איר וועט אויטאָמאַטיש זען דיין ענדערונגען שפיגלט אין די לופּס.

מאָדיפיערס

פילע פון ​​באָאָטסטראַפּ ס קאַמפּאָונאַנץ זענען געבויט מיט אַ באַזע-מאָדיפיער קלאַס צוגאַנג. דאָס מיינט אַז דער מערהייט פון די סטילינג איז קאַנטיינד צו אַ באַזע קלאַס (למשל, .btn) בשעת נוסח ווערייישאַנז זענען קאַנפיינד צו מאָדיפיער קלאסן (למשל, .btn-danger). די מאָדיפיער קלאסן זענען געבויט פֿון דער $theme-colorsמאַפּע צו קאַסטאַמייז די נומער און נאָמען פון אונדזער מאָדיפיער קלאסן.

דאָ זענען צוויי ביישפילן פון ווי מיר שלייף איבער די $theme-colorsמאַפּע צו דזשענערייט מאָדיפיערס צו די .alertקאָמפּאָנענט און אַלע אונדזער .bg-*הינטערגרונט יוטילאַטיז.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

אָפּרופיק

די סאַס לופּס זענען אויך נישט לימיטעד צו קאָליר מאַפּס. איר קענען אויך דזשענערייט אָפּרופיק ווערייישאַנז פון דיין קאַמפּאָונאַנץ אָדער יוטילאַטיז. נעמען פֿאַר בייַשפּיל אונדזער אָפּרופיק טעקסט אַליינמאַנט יוטילאַטיז ווו מיר מישן אַ @eachשלייף פֿאַר די $grid-breakpointsסאַסס מאַפּע מיט אַ מידיאַ אָנפֿרעג.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

אויב איר דאַרפֿן צו מאָדיפיצירן דיין $grid-breakpoints, דיין ענדערונגען וועלן צולייגן צו אַלע די לופּס יטערייטינג איבער די מאַפּע.

CSS וועריאַבאַלז

Bootstrap 4 ינקלודז אַרום צוויי טוץ CSS מנהג פּראָפּערטיעס (וועראַבאַלז) אין זיין קאַמפּיילד CSS. די צושטעלן גרינג אַקסעס צו קאַמאַנלי געוויינט וואַלועס ווי אונדזער טעמע פארבן, ברעאַקפּאָינץ און ערשטיק שריפֿט סטאַקס ווען איר אַרבעט אין דיין בלעטערער ס ינספּעקטאָר, אַ קאָד זאַמדקאַסטן אָדער אַלגעמיין פּראָוטאַטייפּ.

בנימצא וועריאַבאַלז

דאָ זענען די וועריאַבאַלז מיר אַרייַננעמען (טאָן אַז די :rootאיז פארלאנגט). זיי זענען ליגן אין אונדזער _root.scssטעקע.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ביישפילן

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

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ברייקפּאָינט וועריאַבאַלז

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

דאָ ס אַ ביישפּיל פון וואָס איז נישט געשטיצט:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

און דאָ ס אַ ביישפּיל פון וואָס איז געשטיצט:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}