Newidynnau CSS

Mae Bootstrap yn cynnwys tua dau ddwsin o eiddo arfer CSS (newidynnau) yn ei CSS a luniwyd, gyda dwsinau mwy ar y ffordd ar gyfer addasu gwell fesul cydran. Mae'r rhain yn darparu mynediad hawdd i werthoedd a ddefnyddir yn gyffredin fel ein lliwiau thema, torbwyntiau, a phentyrrau ffontiau cynradd wrth weithio yn arolygydd eich porwr, blwch tywod cod, neu brototeipio cyffredinol.

Mae ein holl eiddo personol wedi'u rhagddodi â nhwbs- er mwyn osgoi gwrthdaro â CSS trydydd parti.

Newidynnau gwraidd

Dyma'r newidynnau rydyn ni'n eu cynnwys (sylwch fod :rooteu hangen) y gellir eu cyrchu unrhyw le y mae CSS Bootstrap wedi'i lwytho. Maent wedi'u lleoli yn ein _root.scssffeil ac wedi'u cynnwys yn ein ffeiliau dist a luniwyd.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Newidynnau cydran

Rydym hefyd yn dechrau defnyddio priodweddau arfer fel newidynnau lleol ar gyfer gwahanol gydrannau. Fel hyn gallwn leihau ein CSS wedi'i llunio, sicrhau nad yw arddulliau'n cael eu hetifeddu mewn mannau fel byrddau nythu, a chaniatáu rhywfaint o ailosod ac ymestyn cydrannau Bootstrap ar ôl llunio Sass.

Edrychwch ar ein dogfennaeth tabl i gael cipolwg ar sut rydym yn defnyddio newidynnau CSS .

Rydym hefyd yn defnyddio newidynnau CSS ar draws ein gridiau - ar gyfer cwteri yn bennaf - gyda mwy o ddefnydd o gydrannau yn y dyfodol.

Enghreifftiau

Mae newidynnau CSS yn cynnig hyblygrwydd tebyg i newidynnau Sass, ond heb fod angen eu crynhoi cyn eu cyflwyno i'r porwr. Er enghraifft, dyma ni'n ailosod ffont ein tudalen ac arddulliau cyswllt gyda newidynnau CSS.

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