Сасс

Сезнең чыганакны тизрәк төзергә һәм проектны көйләргә ярдәм итәр өчен, Sass файлларын кулланыгыз.

Бу биттә

Variзгәрешләрдән, карталардан, миксиннардан һәм башкалардан файдалану өчен безнең чыганак 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.scssBootstrap чыганагы Sass файлларын импортлыйсыз. Сездә ике вариант бар: бөтен 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. // OptionalСез шулай ук кирәк булганда бүлек астына Bootstrap өлешләрен өсти башлый аласыз . Файлдан тулы импорт стакасын bootstrap.scssсезнең башлангыч нокта итеп кулланырга тәкъдим итәбез.

Variзгәрешле дефолтлар

Bootstrap-ның һәр Sass үзгәрүчесе !defaultфлагны үз эченә ала, Bootstrap-ның чыганак кодын үзгәртмичә, үз Sass-та үзгәрүченең килешенгән кыйммәтен кире кагарга мөмкинлек бирә. Кирәк булганда үзгәрүчәннәрне күчереп языгыз, аларның кыйммәтләрен үзгәртегез һәм !defaultфлагны алыгыз. Әгәр дә үзгәрүчән билгеләнгән булса, ул Bootstrap'тагы килешү кыйммәтләре белән яңадан билгеләнмәячәк.

Сез Bootstrap үзгәрүчәннәренең тулы исемлеген таба аласыз scss/_variables.scss. Кайбер үзгәрүчәннәр куелган null, бу үзгәрүчәннәр сезнең конфигурациягездә артык язылмасалар, мөлкәтне чыгармыйлар.

Funksзгәрешле өстәмәләр безнең функцияләр кертелгәннән соң булырга тиеш, ә калган импорт алдыннан.

Менә npm аша Bootstrap- ны импортлаганда background-colorһәм төзегәндә үзгәртә торган мисал:color<body>

// 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 аша безнең стартер проект белән башлап җибәрегез! Bootstrap-ны үзегезнең npm проектында ничек төзергә һәм көйләргә икәнлеген карау өчен twbs / 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;

Соңрак, бу үзгәрешләр 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

Кирәкле ачкычлар

Bootstrap без кулланган һәм киңәйткәндә Sass карталарында кайбер махсус ачкычлар булуын фаразлый. Керелгән карталарны көйләгәндә, сез Sass картасының ачкычы кулланылган хаталар белән очрашырга мөмкин.

Мисал өчен, без primary, successһәм dangerачкычларны $theme-colorsсылтамалар, төймәләр, форма өчен кулланабыз. Бу ачкычларның кыйммәтләрен алыштыру бернинди проблема тудырырга тиеш түгел, ләкин аларны бетерү Sass компиляциясенә китерергә мөмкин. Бу очракларда сезгә бу кыйммәтләрне кулланган Sass кодын үзгәртергә кирәк.

Функцияләр

Төсләр

Бездә булган Sass карталары янында тема төсләре дә үзенчәлекле үзгәрүләр буларак кулланылырга мөмкин $primary.

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

Сез Bootstrap tint-color()һәм shade-color()функцияләре белән төсләрне җиңеләйтә яки караңгыландыра аласыз. Бу функцияләр төсләрне кара яки ак белән кушачак, Сассның туган 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 һәм минималь текст булмаган төс контрастын күрсәтергә тиеш , бик аз очраклар белән.

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-svgURI мәгълүматлары китерелергә тиеш.

Функцияләрне өстәү һәм алу

CSS функциясен төрү өчен без addһәм функцияләрне кулланабыз . Бу функцияләрнең төп максаты - "берәмлексез" кыйммәт экспрессиягә күчкәндә хаталардан саклану. Мондый сүзләр математик яктан дөрес булуына карамастан, барлык браузерларда хата җибәрәчәк.subtractcalc0calccalc(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
  }
}