د تیمنګ بوټسټریپ

د اسانه تیمنګ او اجزاو بدلونونو لپاره د نړیوال سټایل غوره توبونو لپاره زموږ د نوي جوړ شوي Sass متغیرونو سره بوټسټریپ 4 تنظیم کړئ.

پیژندنه

په بوټسټریپ 3 کې، تیمنګ په لویه کچه په لږ، دودیز CSS، او یو جلا موضوع سټایل شیټ کې د متغیر اووررایډونو لخوا پرمخ وړل شوی و چې موږ په خپلو distفایلونو کې شامل کړی. د یو څه هڅو سره ، یو څوک کولی شي د اصلي فایلونو لمس کولو پرته د بوټسټریپ 3 لید په بشپړ ډول له سره ډیزاین کړي. Bootstrap 4 یو پیژندل شوی، مګر یو څه مختلف طریقه وړاندې کوي.

اوس، تیمنګ د Sass متغیرونو، Sass نقشې، او دودیز CSS لخوا ترسره کیږي. دلته نور وقف شوي موضوع سټایل شیټ نشته؛ پرځای یې، تاسو کولی شئ جوړ شوی موضوع فعال کړئ ترڅو تدریجي، سیوري، او نور ډیر څه اضافه کړئ.

ساس

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

د فایل جوړښت

هرکله چې امکان ولري، د بوټسټریپ اصلي فایلونو بدلولو څخه ډډه وکړئ. د ساس لپاره، دا پدې مانا ده چې خپل سټایل شیټ رامینځته کړئ چې بوټسټریپ واردوي نو تاسو کولی شئ ترمیم او پراخ کړئ. فرض کړئ چې تاسو د بسته بندۍ مدیر لکه 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

د دې ځای په ځای کولو سره، تاسو کولی شئ په خپل custom.scss. تاسو کولی شئ د اړتیا سره سم د برخې لاندې د بوټسټریپ برخې اضافه کول هم پیل کړئ // Optional. موږ وړاندیز کوو چې زموږ د bootstrap.scssفایل څخه د بشپړ وارداتو سټیک ستاسو د پیل ټکي په توګه وکاروئ.

متغیر ډیفالټ

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

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

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

دلته یو مثال دی چې د npm له لارې د بوټسټریپ واردولو او تالیف کولو لپاره background-colorاو بدلوي:color<body>

@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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

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

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

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

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

نقشه بدله کړئ

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

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

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

د نوي رنګ $theme-colorsاضافه کولو لپاره، نوې کیلي او ارزښت اضافه کړئ:

$theme-colors: (
  "custom-color": #900
);

له نقشې څخه لرې کړئ

د رنګونو لرې کولو لپاره $theme-colors، یا کومې بلې نقشې څخه کار واخلئ map-remove. خبر اوسئ چې تاسو باید دا زموږ د اړتیاو او اختیارونو ترمینځ دننه کړئ:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

اړین کیلي

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

د مثال په توګه، موږ د لینکونو، تڼیو، او فورمو حالتونو لپاره د ,، primaryاو successکلیدونو dangerڅخه کار اخلو. $theme-colorsد دې کلیدونو ارزښتونو ځای په ځای کول باید کومه ستونزه ونلري ، مګر د دوی لرې کول ممکن د Sass تالیف مسلو لامل شي. په دې مواردو کې، تاسو به د Sass کوډ تعدیل ته اړتیا ولرئ چې د دې ارزښتونو څخه کار اخلي.

افعال

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

دا تاسو ته اجازه درکوي د ساس نقشې څخه یو رنګ غوره کړئ لکه څنګه چې تاسو د v3 څخه د رنګ متغیر وکاروئ.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

موږ د نقشې څخه د رنګ ځانګړي کچې ترلاسه کولو لپاره بل فعالیت هم لرو. $theme-colorsد منفي کچې ارزښتونه به رنګ روښانه کړي، پداسې حال کې چې لوړې کچې به تیاره وي.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

په عمل کې، تاسو به فنکشن ته زنګ ووهئ او په دوه پیرامیټونو کې تېر شئ: د رنګ نوم $theme-colors(د مثال په توګه، ابتدايي یا خطر) او د شمیرې کچه.

.custom-element {
  color: theme-color-level(primary, -10);
}

اضافي فنکشنونه په راتلونکي کې اضافه کیدی شي یا ستاسو خپل دودیز Sass د اضافي Sass نقشو لپاره د کچې افعال رامینځته کولو لپاره ، یا حتی یو عمومي که تاسو غواړئ ډیر فعل اوسئ.

د رنګ برعکس

یو اضافي فعالیت چې موږ یې په بوټسټریپ کې شامل کوو د رنګ برعکس فعالیت دی color-yiq. دا د YIQ رنګ ځای کاروي ترڅو په اتوماتيک ډول د ټاکل شوي اساس رنګ پراساس روښانه ( #fff) یا تیاره ( ) برعکس رنګ بیرته راولي. #111دا فنکشن په ځانګړي توګه د مکسین یا لوپس لپاره ګټور دی چیرې چې تاسو ډیری ټولګي رامینځته کوئ.

د مثال په توګه، زموږ له $theme-colorsنقشې څخه د رنګ سویچونو تولید لپاره:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

دا د یو اړخیز برعکس اړتیاو لپاره هم کارول کیدی شي:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

تاسو کولی شئ زموږ د رنګ نقشې دندو سره اساس رنګ هم مشخص کړئ:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

SVG فرار

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

د Sass اختیارونه

زموږ د جوړ شوي دودیز متغیر فایل سره د بوټسټریپ 4 تنظیم کړئ او په اسانۍ سره د نوي $enable-*Sass متغیرونو سره نړیوال CSS غوره توبونه بدل کړئ. د یو متغیر ارزښت له پامه غورځول او د اړتیا سره سم بیا کمپایل npm run testکړئ.

تاسو کولی شئ دا تغیرات د بوټسټریپ scss/_variables.scssفایل کې د کلیدي نړیوالو انتخابونو لپاره ومومئ او تنظیم کړئ.

متغیر	ارزښتونه	تفصیل
`$spacer`	`1rem`(ډیفالټ)، یا کوم ارزښت> 0	د ډیفالټ سپیسر ارزښت مشخص کوي ترڅو په برنامه توګه زموږ د سپیسر اسانتیاوې رامینځته کړي .
`$enable-rounded`	`true`(default) یا`false`	`border-radius`په مختلفو اجزاوو کې وړاندې شوي سټایلونه فعالوي .
`$enable-shadows`	`true`یا `false`(ډیفالټ)	`box-shadow`په مختلفو برخو کې د مخکینۍ تعریف شوي آرائشی سټایلونه فعالوي. `box-shadow`د تمرکز حالتونو لپاره کارول شوي اغیزه نه کوي .
`$enable-gradients`	`true`یا `false`(ډیفالټ)	`background-image`په مختلفو برخو کې د سټایلونو له لارې مخکې تعریف شوي ګریډینټ فعالوي .
`$enable-transitions`	`true`(default) یا`false`	`transition`په مختلفو برخو کې مخکینۍ تعریف شوي s فعالوي .
`$enable-prefers-reduced-motion-media-query`	`true`(default) یا`false`	د `prefers-reduced-motion`میډیا پوښتنې فعالوي ، کوم چې د کاروونکو د براوزر/آپریټنګ سیسټم غوره توبونو پراساس ځینې متحرکات / لیږدونه فشاروي.
`$enable-hover-media-query`	`true`یا `false`(ډیفالټ)	بې برخې شوي
`$enable-grid-classes`	`true`(default) یا`false`	د ګریډ سیسټم لپاره د CSS ټولګیو نسل فعالوي (د بیلګې په توګه،،،، `.container`او `.row`نور `.col-md-1`).
`$enable-caret`	`true`(default) یا`false`	د pseudo عنصر کارټ فعالوي `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(default) یا`false`	غیر معیوب شوي تڼۍ عناصرو ته "لاس" کرسر اضافه کړئ.
`$enable-print-styles`	`true`(default) یا`false`	د چاپ کولو اصلاح کولو لپاره سټایلونه فعالوي.
`$enable-responsive-font-sizes`	`true`یا `false`(ډیفالټ)	د ځواب ویونکي فونټ اندازه فعالوي
`$enable-validation-icons`	`true`(default) یا`false`	په متني آخذونو `background-image`کې شبیه فعالوي او د تایید حالتونو لپاره ځینې دودیز فارمونه.
`$enable-deprecation-messages`	`true`(default) یا`false`	د اخطارونو پټولو لپاره تنظیم کړئ `false`کله چې د کوم تخریب شوي مکسینونو او افعالو څخه کار واخلئ کوم چې پلان شوي په کې لرې شي `v5`.

رنګ

د بوټسټریپ ډیری بیلابیل برخې او اسانتیاوې د رنګونو لړۍ له لارې رامینځته شوي چې په ساس نقشه کې تعریف شوي. دا نقشه په ساس کې لوپ کیدی شي ترڅو ژر تر ژره د قواعدو لړۍ رامینځته کړي.

ټول رنګونه

ټول رنګونه په بوټسټریپ 4 کې شتون لري، د Sass متغیرونو او په scss/_variables.scssفایل کې د Sass نقشې په توګه شتون لري. دا به په راتلونکو کوچنیو ریلیزونو کې پراخه شي ترڅو اضافي سیوري اضافه کړي ، لکه د خړ پییل پیلیټ په څیر چې موږ دمخه پکې شامل یو.

$ نیلي #007bff

$انډیګو #6610f2

$ ارغواني #6f42c1

$ګلابي #e83e8c

$ سور #dc3545

$نارنج #fd7e14

$زیړ #ffc107

زرغون #28a745

$ټیل #20c997

$سیان #17a2b8

دلته دا دي چې تاسو څنګه کولی شئ دا په خپل ساس کې وکاروئ:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

د رنګ کارولو ټولګي هم د ترتیب colorاو ترتیب لپاره شتون لري background-color.

په راتلونکي کې، موږ به د هر رنګ سیوري لپاره د ساس نقشې او تغیرات چمتو کړو لکه څنګه چې موږ لاندې د خړ رنګونو سره ترسره کړي.

د موضوع رنګونه

scss/_variables.scssموږ د رنګ سکیمونو رامینځته کولو لپاره د کوچني رنګ پیلیټ رامینځته کولو لپاره د ټولو رنګونو فرعي سیټ کاروو ، د Sass متغیرونو او د بوټسټریپ فایل کې د Sass نقشې په توګه هم شتون لري .

$لومړنی #007bff

$ثانوي #6c757d

$ بریالیتوب #28a745

$ خطر #dc3545

$خبرتیا #ffc107

$معلومات #17a2b8

$ رڼا #f8f9fa

تور #343a40

خړ

د خړ متغیرونو پراخه سیټ او scss/_variables.scssستاسو په پروژه کې د خړ سیوري دوامداره سیوري لپاره د Sass نقشه. په یاد ولرئ چې دا "ښکلي خړ" دي، کوم چې د غیر جانبدار خړ پر ځای د فرعي نیلي ټون په لور روان دي.

خړ - 100 ډالر #f8f9fa

خړ - 200 ډالر #e9ecef

خړ - 300 ډالر #dee2e6

خړ - 400 ډالر #ced4da

خړ - 500 ډالر #adb5bd

خړ - 600 ډالر #6c757d

خړ - 700 ډالر #495057

خړ - 800 ډالر #343a40

خړ - 900 ډالر #212529

دننه scss/_variables.scss، تاسو به د بوټسټریپ رنګ تغیرات او د ساس نقشه ومومئ. دلته د $colorsساس نقشه یوه بیلګه ده:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

په نقشه کې ارزښتونه اضافه کړئ، لیرې کړئ، یا بدل کړئ ترڅو تازه کړئ چې دوی په ډیری نورو برخو کې څنګه کارول کیږي. بدبختانه پدې وخت کې ، هره برخه دا ساس نقشه نه کاروي. راتلونکي تازه معلومات به پدې کې د ښه والي لپاره هڅه وکړي. تر هغه وخته، د ${color}متغیرونو او د دې Sass نقشې کارولو په اړه پالن جوړ کړئ.

اجزا

د بوټسټریپ ډیری برخې او اسانتیاوې د @eachلوپونو سره جوړ شوي چې د Sass نقشې باندې تکرار کیږي. دا په ځانګړي توګه زموږ لخوا د یوې برخې $theme-colorsډولونو رامینځته کولو او د هرې وقفې لپاره د ځواب ویونکي ډولونو رامینځته کولو لپاره ګټور دی. لکه څنګه چې تاسو دا ساس نقشې تنظیم کړئ او بیا یې تنظیم کړئ، تاسو به په اتوماتيک ډول خپل بدلونونه په دې لوپونو کې منعکس کړئ.

ترمیم کونکي

د بوټسټریپ ډیری برخې د بیس - ترمیم کونکي ټولګي چلند سره رامینځته شوي. دا پدې مانا ده چې د سټایل ډیری برخه په اساس طبقه کې شامله ده (د بیلګې په توګه، .btn) پداسې حال کې چې د سټایل توپیرونه د بدلون کونکي ټولګیو پورې محدود دي (د بیلګې په توګه، .btn-danger). دا ترمیم کونکي ټولګي د $theme-colorsنقشې څخه جوړ شوي ترڅو زموږ د ترمیم کونکي ټولګیو شمیر او نوم تنظیم کړي.

دلته دوه مثالونه دي چې موږ څنګه $theme-colorsنقشه ته لوپ کوو ترڅو .alertاجزاو او زموږ د .bg-*شالید ټولو اسانتیاو ته بدلون ورکوونکي پیدا کړو.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ځواب ورکوونکی

دا ساس لوپونه هم د رنګ نقشو پورې محدود ندي. تاسو کولی شئ د خپلو برخو یا اسانتیاو ځواب ویونکي تغیرات هم رامینځته کړئ. د مثال په توګه زموږ د ځواب ویونکي متن ترتیب کولو اسانتیاوې واخلئ چیرې چې موږ د میډیا پوښتنې سره د ساس نقشې @eachلپاره لوپ مخلوط کوو.$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

که تاسو اړتیا لرئ خپل بدلون بدل کړئ $grid-breakpoints، ستاسو بدلونونه به په هغه نقشه کې تکرار شوي ټولو لوپونو باندې پلي شي.

د سی ایس ایس متغیرونه

Bootstrap 4 په خپل ترتیب شوي CSS کې شاوخوا دوه درجن CSS دودیز ملکیتونه (متغیرونه) شامل دي. دا معمولا کارول شوي ارزښتونو ته اسانه لاسرسی چمتو کوي لکه زموږ د موضوع رنګونه ، بریک پوائنټونه ، او لومړني فونټ سټیکس کله چې ستاسو د براوزر انسپکټر ، کوډ سینڈ باکس ، یا عمومي پروټوټایپ کې کار کوي.

شته متغیرات

دلته هغه متغیرونه دي چې موږ پکې شامل دي (یادونه وکړئ چې :rootاړین دی). دوی زموږ په _root.scssفایل کې موقعیت لري.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

مثالونه

د CSS متغیرونه د Sass متغیرونو ته ورته انعطاف وړاندیز کوي ، مګر پرته له دې چې براوزر ته وړاندې شي د تالیف اړتیا پرته. د مثال په توګه، دلته موږ د خپل پاڼې فونټ او لینک سټایلونه د CSS متغیرونو سره بیا تنظیم کوو.

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

د وقفې نقطې متغیرات

په داسې حال کې چې موږ په اصل کې زموږ په CSS متغیرونو کې د وقفې نقطې شاملې کړې (د مثال په توګه --breakpoint-md)، دا د رسنیو پوښتنو کې نه ملاتړ کیږي ، مګر دوی لاهم د رسنیو پوښتنو کې د قواعدو په چوکاټ کې کارول کیدی شي . دا د وقفې نقطې متغیرونه د شاته مطابقت لپاره په ترتیب شوي CSS کې پاتې دي په دې شرط چې دوی د جاواسکریپټ لخوا کارول کیدی شي. نور معلومات په سپیک کې زده کړئ .

دلته د هغه څه یوه بیلګه ده چې نه ملاتړ کیږي:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

او دلته د هغه څه یوه بیلګه ده چې ملاتړ کیږي:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}