CSS oniyipada

Bootstrap pẹlu ni ayika meji mejila awọn ohun-ini aṣa aṣa CSS (awọn oniyipada) ninu CSS rẹ ti o ṣajọ, pẹlu awọn dosinni diẹ sii lori ọna fun isọdi ilọsiwaju lori ipilẹ-ẹya kan. Iwọnyi pese iraye si irọrun si awọn iye ti a lo nigbagbogbo bii awọn awọ akori wa, awọn aaye fifọ, ati awọn akopọ fonti akọkọ nigbati o n ṣiṣẹ ni olubẹwo ẹrọ aṣawakiri rẹ, apoti iyanrin koodu kan, tabi afọwọṣe gbogbogbo.

Gbogbo awọn ohun-ini aṣa wa jẹ iṣaju pẹlubs- lati yago fun awọn ija pẹlu CSS ẹnikẹta.

Gbongbo oniyipada

Eyi ni awọn oniyipada ti a pẹlu (ṣe akiyesi pe o :rootnilo) ti o le wọle si nibikibi Bootstrap's CSS ti kojọpọ. Wọn wa ninu _root.scssfaili wa ati pe o wa ninu awọn faili disiki ti a ṣajọ.

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

Awọn oniyipada paati

A tun bẹrẹ lati lo awọn ohun-ini aṣa bi awọn oniyipada agbegbe fun ọpọlọpọ awọn paati. Ni ọna yii a le dinku CSS ti a kojọpọ, rii daju pe awọn aṣa ko ni jogun ni awọn aaye bii awọn tabili itẹle, ati gba diẹ ninu isọdọtun ipilẹ ati faagun awọn paati Bootstrap lẹhin akopọ Sass.

Wo iwe tabili wa fun oye diẹ si bi a ṣe nlo awọn oniyipada CSS .

A tun nlo awọn oniyipada CSS kọja awọn akoj wa — ni akọkọ fun awọn gọta—pẹlu lilo paati diẹ sii ti nbọ ni ọjọ iwaju.

Awọn apẹẹrẹ

Awọn oniyipada CSS nfunni ni irọrun ti o jọra si awọn oniyipada Sass, ṣugbọn laisi iwulo fun akopọ ṣaaju ki o to ṣiṣẹ si ẹrọ aṣawakiri naa. Fún àpẹrẹ, níhìn-ín a tún ń ṣàtúntò fọ́nǹbù ojú-ewé wa àti àwọn ọ̀nà ìsopọ̀ pẹ̀lú àwọn oniyipada CSS.

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