סאַס

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

אויף דעם בלאַט

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

טעקע סטרוקטור

ווען מעגלעך, ויסמיידן מאָדיפיצירן 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";

// 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

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

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

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

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

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

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

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

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

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

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

$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

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

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

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

פאַנגקשאַנז

קאָלאָרס

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

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

איר קענען לייטאַן אָדער דאַרקאַן פארבן מיט Bootstrap ס 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) קאַנטראַסט קאָליר באזירט אויף די ספּעסיפיעד באַזע קאָליר. די פֿונקציע איז ספּעציעל נוציק פֿאַר מיקסינס אָדער לופּס ווו איר דזשענערייט קייפל קלאסן.

פֿאַר בייַשפּיל, צו דזשענערייט קאָליר סוואַטשיז פון אונדזער $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פונקציע, דאַטן 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);
}

מיקסינס

אונדזער 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
  }
}