ساس

زموږ د سرچینې Sass فایلونو څخه کار واخلئ ترڅو د متغیرونو، نقشو، مکسینونو، او دندو څخه ګټه پورته کړئ ترڅو تاسو سره ستاسو د پروژې ګړندۍ او دودیز کولو کې مرسته وکړي.

په دې پاڼه کې

زموږ د سرچینې Sass فایلونو څخه کار واخلئ ترڅو د متغیرونو، نقشو، مکسینونو او نورو څخه ګټه پورته کړئ.

د فایل جوړښت

هرکله چې امکان ولري، د بوټسټریپ اصلي فایلونو بدلولو څخه ډډه وکړئ. د ساس لپاره، دا پدې مانا ده چې خپل سټایل شیټ رامینځته کړئ چې بوټسټریپ واردوي نو تاسو کولی شئ ترمیم او پراخ کړئ. فرض کړئ چې تاسو د بسته بندۍ مدیر لکه npm کاروئ، تاسو به د فایل جوړښت ولرئ چې داسې ښکاري:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

که تاسو زموږ د سرچینې فایلونه ډاونلوډ کړي او د بسته بندۍ مدیر نه کاروئ، نو تاسو به په لاسي ډول د دې جوړښت سره ورته یو څه جوړ کړئ، د بوټسټریپ سرچینې فایلونه له خپل ځان څخه جلا وساتئ.

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. تاسو کولی شئ د اړتیا سره سم د برخې لاندې د بوټسټریپ برخې اضافه کول هم پیل کړئ // Optional. موږ وړاندیز کوو چې زموږ د bootstrap.scssفایل څخه د بشپړ وارداتو سټیک ستاسو د پیل ټکي په توګه وکاروئ.

متغیر ډیفالټ

په بوټسټریپ کې د Sass هر متغیر کې !defaultبیرغ شامل دی چې تاسو ته اجازه درکوي د بوټسټریپ سرچینې کوډ بدلولو پرته په خپل Sass کې د متغیر ډیفالټ ارزښت بیرته راوباسئ. د اړتیا سره سم متغیرات کاپي او پیسټ کړئ، د دوی ارزښتونه تعدیل کړئ، او !defaultبیرغ لرې کړئ. که یو متغیر لا دمخه ټاکل شوی وي ، نو دا به په بوټسټریپ کې د ډیفالټ ارزښتونو لخوا بیا نه ټاکل کیږي.

تاسو به په کې د بوټسټریپ متغیرونو بشپړ لیست ومومئ scss/_variables.scss. ځینې متغیرونه په ترتیب شوي دي null، دا متغیرونه ملکیت نه تولیدوي پرته لدې چې دوی ستاسو په ترتیب کې له پامه غورځول شوي وي.

متغیر اوورایډونه باید زموږ د دندو واردولو وروسته راشي، مګر د نورو وارداتو څخه مخکې.

دلته یو مثال دی چې د npm له لارې د بوټسټریپ واردولو او تالیف کولو لپاره 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

په بوټسټریپ کې د هر متغیر لپاره د اړتیا په صورت کې تکرار کړئ، په شمول لاندې نړیوال اختیارونه.

زموږ د سټارټر پروژې سره د npm له لارې د بوټسټریپ سره پیل وکړئ! د twbs/bootstrap-npm-starter ټیمپلیټ ذخیره ته لاړشئ ترڅو وګورئ چې څنګه په خپله npm پروژه کې بوټسټریپ رامینځته او تنظیم کړئ. د ساس کمپیلر، آټوپریفیکسر، سټایلینټ، پرج سی ایس ایس، او بوټسټریپ شبیه شامل دي.

نقشې او لوپونه

بوټسټریپ کې یو څو د ساس نقشې شاملې دي، د کلیدي ارزښت جوړه چې د اړونده سی ایس ایس کورنۍ رامینځته کول اسانه کوي. موږ د خپلو رنګونو، گرډ بریک پوائنټونو، او نورو لپاره د ساس نقشې کاروو. لکه د Sass متغیرونو په څیر، د Sass ټولې نقشې !defaultبیرغ شامل دي او کیدای شي له پامه غورځول شي او پراخ شي.

زموږ ځینې ساس نقشې د ډیفالټ په واسطه په خالي نقشو کې یوځای شوي. دا د دې لپاره ترسره کیږي چې د ورکړل شوي ساس نقشې اسانه پراختیا ته اجازه ورکړي ، مګر د نقشې څخه د توکو لرې کول یو څه ستونزمن کولو لګښت راځي .

نقشه بدله کړئ

په نقشه کې ټول متغیرونه $theme-colorsد واحد متغیر په توګه تعریف شوي. زموږ په $theme-colorsنقشه کې د موجوده رنګ بدلولو لپاره، لاندې خپل دودیز Sass فایل کې اضافه کړئ:

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

وروسته بیا، دا متغیرات د بوټسټراپ په $theme-colorsنقشه کې تنظیم شوي:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

په نقشه کې اضافه کړئ

$theme-colorsد خپل دودیز ارزښتونو سره د نوي ساس نقشه رامینځته کولو او د اصلي نقشې سره یوځای کولو سره ، یا کومې بلې نقشې ته نوي رنګونه اضافه کړئ . په دې حالت کې، موږ به یوه نوې $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 تالیف مسلو لامل شي. په دې مواردو کې، تاسو به د Sass کوډ تعدیل ته اړتیا ولرئ چې د دې ارزښتونو څخه کار اخلي.

افعال

رنګونه

د ساس نقشو تر څنګ چې موږ یې لرو، د موضوع رنګونه هم د واحد متغیر په توګه کارول کیدی شي، لکه $primary.

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

تاسو کولی شئ د بوټسټریپ 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 او لږترلږه غیر متن رنګ 3: 1 توپیر وړاندې کړي ، د ډیرو لږو استثناوو سره.

د دې سره د مرستې لپاره، موږ color-contrastپه بوټسټریپ کې فعالیت شامل کړ. دا د رنګ ځای کې د نسبي روښانتیا پراساس د برعکس حدونو محاسبه کولو لپاره د 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 فرار

موږ د SVG شالید عکسونو لپاره د , او حروف escape-svgڅخه د خلاصون لپاره فنکشن کاروو. کله چې د فنکشن کاروئ، د معلوماتو URIs باید حواله شي.<>#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/لارښود یو ټن مکسین لري چې د بوټسټریپ برخې بریښنا کوي او ستاسو په خپله پروژه کې هم کارول کیدی شي.

د رنګ سکیمونه

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