Сасс

Жылдам құрастыруға және жобаңызды теңшеуге көмектесетін айнымалы мәндердің, карталардың, миксиндердің және функциялардың артықшылығын пайдалану үшін бастапқы 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.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Бастапқы нүкте ретінде біздің файлдағы толық импорт стекін пайдалануды ұсынамыз .

Айнымалы әдепкі мәндер

Bootstrap ішіндегі әрбір Sass айнымалысы !defaultBootstrap бастапқы кодын өзгертпестен жеке Sass жүйесінде айнымалының әдепкі мәнін қайта анықтауға мүмкіндік беретін жалаушаны қамтиды. Қажет болса, айнымалы мәндерді көшіріп, қойыңыз, олардың мәндерін өзгертіңіз және !defaultжалаушаны жойыңыз. Айнымалы мән әлдеқашан тағайындалған болса, ол Bootstrap бағдарламасындағы әдепкі мәндер арқылы қайта тағайындалмайды.

Bootstrap айнымалыларының толық тізімін мына жерден табасыз scss/_variables.scss. Кейбір айнымалылар параметріне орнатылған null, бұл айнымалылар конфигурацияңызда қайта анықталмағанша сипатты шығармайды.

Айнымалыларды қайта анықтау біздің функциялар импортталғаннан кейін, бірақ импорттың қалған бөлігінен бұрын келуі керек.

Мұнда 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 ішіндегі кез келген айнымалы үшін қажетінше қайталаңыз.

Бастапқы жобамызбен npm арқылы Bootstrap қолданбасын бастаңыз! Жеке npm жобаңызда Bootstrap құру және теңшеу жолын көру үшін twbs /bootstrap-npm-starter үлгі репозиторийіне өтіңіз. Sass компиляторы, автопрефиксер, 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, және dangerпернелерін пайдаланамыз. $theme-colorsБұл кілттердің мәндерін ауыстыру ешқандай мәселе тудырмауы керек, бірақ оларды жою Sass компиляция мәселелерін тудыруы мүмкін. Бұл жағдайларда сол мәндерді пайдаланатын Sass кодын өзгерту қажет болады.

Функциялар

Түстер

Бізде бар Sass карталарының жанында тақырып түстері сияқты дербес айнымалылар ретінде де пайдалануға болады $primary.

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

tint-color()Түстерді Bootstrap және 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`
}

Escape SVG

Біз SVG фондық кескіндер үшін , және таңбаларынан escape-svgқұтылу үшін функцияны қолданамыз. Функцияны пайдаланған кезде деректер URI мекенжайлары цитаталануы керек.<>#escape-svg

Қосу және азайту функциялары

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қолдау көрсету арқылы қол жетімді .lightdark

@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
  }
}