Theming Bootstrap

ለቀላል ጭብጦች እና አካላት ለውጦች ለአለምአቀፍ የቅጥ ምርጫዎች ቡትስትራፕ 4ን በአዲሱ አብሮገነብ Sass ተለዋዋጮች ያብጁ።

መግቢያ

በBootstrap 3 ውስጥ፣ ጭብጥ በአብዛኛው የሚነዳው በተለዋዋጭ መሻሮች በ LESS፣ በብጁ CSS እና በፋይሎቻችን ውስጥ ባካተትነው የተለየ ጭብጥ የቅጥ ሉህ ነው dist። በተወሰነ ጥረት አንድ ሰው የ Bootstrap 3 ዋና ፋይሎቹን ሳይነኩ ሙሉ ለሙሉ እንደገና ሊነድፍ ይችላል. Bootstrap 4 የሚታወቅ፣ ግን ትንሽ የተለየ አቀራረብ ያቀርባል።

አሁን፣ ጭብጥ በ Sass ተለዋዋጮች፣ Sass ካርታዎች እና በብጁ ሲኤስኤስ ተፈጽሟል። ከአሁን በኋላ የተለየ ገጽታ የቅጥ ሉህ የለም፤ በምትኩ፣ አብሮ የተሰራውን ቅልመት፣ ጥላዎች እና ሌሎችን ለመጨመር ማንቃት ይችላሉ።

ሳስ

ከተለዋዋጮች፣ ካርታዎች፣ ድብልቅ ነገሮች እና ተጨማሪ ነገሮች ለመጠቀም የምንጭ የSass ፋይሎችን ይጠቀሙ።

የፋይል መዋቅር

በተቻለ መጠን የBootstrapን ዋና ፋይሎችን ከመቀየር ይቆጠቡ። ለ Sass፣ ያ ማለት እርስዎ እንዲያስተካክሉት እና እንዲራዘሙት ቡትስትራፕን የሚያስመጣ የራስዎን የቅጥ ሉህ መፍጠር ማለት ነው። እንደ npm ያለ የጥቅል አስተዳዳሪን እየተጠቀምክ እንደሆነ ካሰብክ፣ ይህን የሚመስል የፋይል መዋቅር ይኖርሃል፡-

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

የምንጭ ፋይሎቻችንን ካወረዱ እና የጥቅል አስተዳዳሪን እየተጠቀሙ ካልሆኑ፣ የBootstrap የምንጭ ፋይሎችን ከራስዎ በመለየት ተመሳሳይ የሆነ ነገር እራስዎ ማዋቀር ይፈልጋሉ።

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

በማስመጣት ላይ

በእርስዎ custom.scssውስጥ የ Bootstrap ምንጭ Sass ፋይሎችን ያስመጣሉ። ሁለት አማራጮች አሉዎት፡ ሁሉንም የBootstrap ያካትቱ ወይም የሚፈልጉትን ክፍሎች ይምረጡ። የኋለኛውን እናበረታታለን፣ ምንም እንኳን በእኛ አካላት ላይ አንዳንድ መስፈርቶች እና ጥገኞች እንዳሉ ልብ ይበሉ። ለእኛ ተሰኪዎች አንዳንድ ጃቫ ስክሪፕት ማካተትም ያስፈልግዎታል።

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

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

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

ያንን ማዋቀር በቦታዎ ውስጥ ማንኛውንም የ Sass ተለዋዋጮችን እና ካርታዎችን ማሻሻል መጀመር ይችላሉ custom.scss። // Optionalእንዲሁም እንደ አስፈላጊነቱ በክፍሉ ስር የ Bootstrap ክፍሎችን ማከል መጀመር ይችላሉ ። bootstrap.scssከፋይላችን የሚገኘውን ሙሉ የማስመጣት ቁልል እንደ መነሻ እንድትጠቀሙበት እንመክራለን ።

ተለዋዋጭ ነባሪዎች

በBootstrap 4 ውስጥ ያለው እያንዳንዱ የሳስ ተለዋዋጭ !defaultየBootstrapን የምንጭ ኮድ ሳይቀይሩ የተለዋዋጭውን ነባሪ እሴት በራስዎ Sass እንዲሽሩ የሚያስችልዎትን ባንዲራ ያካትታል። እንደ አስፈላጊነቱ ተለዋዋጮችን ይቅዱ እና ይለጥፉ፣ እሴቶቻቸውን ያሻሽሉ እና !defaultባንዲራውን ያስወግዱ። አንድ ተለዋዋጭ አስቀድሞ ከተመደበ፣ ከዚያ በቡትስትራፕ ውስጥ ባሉ ነባሪ እሴቶች እንደገና አይመደብም።

ሙሉውን የBootstrap ተለዋዋጮች ዝርዝር ውስጥ ያገኛሉ scss/_variables.scss።

በተመሳሳዩ የ Sass ፋይል ውስጥ ያሉ ተለዋዋጭ መሻሮች ከነባሪ ተለዋዋጮች በፊት ወይም በኋላ ሊመጡ ይችላሉ። ነገር ግን፣ በመላው የ Sass ፋይሎች ላይ ሲሻሩ፣ የBootstrap's Sass ፋይሎችን ከማስመጣትዎ በፊት መሻሮችዎ መምጣት አለባቸው።

Bootstrapን በ npm ሲያስገቡ እና ሲያጠናቅቁ background-colorእና colorለ የሚለውን የሚቀይር ምሳሌ ይኸውና<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

ከታች ያሉትን አለምአቀፍ አማራጮችን ጨምሮ በBootstrap ውስጥ ላለ ማንኛውም ተለዋዋጭ እንደ አስፈላጊነቱ ይድገሙት።

ካርታዎች እና ቀለበቶች

ቡትስትራፕ 4 በጣት የሚቆጠሩ የሳስ ካርታዎች፣ ተዛማጅ የCSS ቤተሰቦችን ማፍራት ቀላል የሚያደርጉ ቁልፍ እሴት ጥንዶችን ያካትታል። ለቀለሞቻችን፣ የፍርግርግ መግቻ ነጥቦች እና ሌሎችም የ Sass ካርታዎችን እንጠቀማለን። ልክ እንደ Sass ተለዋዋጮች፣ ሁሉም የ Sass ካርታዎች !defaultባንዲራውን ያካተቱ እና ሊሻሩ እና ሊራዘሙ ይችላሉ።

አንዳንድ የ Sass ካርታዎቻችን በነባሪ ወደ ባዶዎች ተዋህደዋል። ይህ የሚደረገው የSass ካርታን በቀላሉ ለማስፋፋት ነው፣ ነገር ግን እቃዎችን ከካርታው ላይ ትንሽ የበለጠ አስቸጋሪ ለማድረግ በሚያስችለው ወጪ ነው።

ካርታ ቀይር

በእኛ ካርታ ላይ ያለውን ቀለም ለመቀየር $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 ኮድ ማሻሻል ያስፈልግዎታል።

ተግባራት

Bootstrap በርካታ የ 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 የቀለም ተለዋዋጭ እንዴት እንደሚጠቀሙ አይነት ከ Sass ካርታ አንድ ቀለም እንዲመርጡ ያስችሉዎታል።

.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 ሊታከል ይችላል።

የቀለም ንፅፅር

በ Bootstrap ውስጥ የምናካትተው አንድ ተጨማሪ ተግባር የቀለም ንፅፅር ተግባር ነው color-yiq። በተጠቀሰው የመሠረት ቀለም ላይ በመመርኮዝ የብርሃን ( ) ወይም ጨለማ ( ) ንፅፅር ቀለም በራስ-ሰር ለመመለስ የ YIQ ቀለም ቦታን ይጠቀማል ። ይህ ተግባር በተለይ ብዙ ክፍሎችን ለሚያመነጩበት ድብልቅ ወይም loops ጠቃሚ ነው።#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`
}

Sass አማራጮች

አብሮ በተሰራው የብጁ ተለዋዋጮች ፋይላችን Bootstrap 4ን ያብጁ እና አለምአቀፍ የሲኤስኤስ ምርጫዎችን በአዲስ $enable-*Sass ተለዋዋጮች በቀላሉ ይቀያይሩ። የተለዋዋጭ እሴትን ይሽሩ እና npm run testእንደ አስፈላጊነቱ እንደገና ያሰባስቡ።

scss/_variables.scssበBootstrap ፋይል ውስጥ እነዚህን ተለዋዋጮች ለቁልፍ ዓለም አቀፍ አማራጮች ማግኘት እና ማበጀት ይችላሉ ።

ተለዋዋጭ	እሴቶች	መግለጫ
`$spacer`	`1rem`(ነባሪ)፣ ወይም ማንኛውም እሴት > 0	የስፔሰር መገልገያዎችን በፕሮግራም ለማመንጨት ነባሪውን የስፔሰር ዋጋ ይገልጻል ።
`$enable-rounded`	`true`(ነባሪ) ወይም`false`	`border-radius`በተለያዩ ክፍሎች ላይ አስቀድሞ የተገለጹ ቅጦችን ያነቃል ።
`$enable-shadows`	`true`ወይም `false`(ነባሪ)	`box-shadow`በተለያዩ ክፍሎች ላይ አስቀድሞ የተገለጹ ቅጦችን ያነቃል ።
`$enable-gradients`	`true`ወይም `false`(ነባሪ)	`background-image`በተለያዩ ክፍሎች ላይ ባሉ ቅጦች ቀድሞ የተገለጹ ቅልመትን ያነቃል ።
`$enable-transitions`	`true`(ነባሪ) ወይም`false`	`transition`በተለያዩ ክፍሎች ላይ አስቀድሞ የተገለጹትን ያነቃል ።
`$enable-hover-media-query`	`true`ወይም `false`(ነባሪ)	ተቋርጧል
`$enable-grid-classes`	`true`(ነባሪ) ወይም`false`	ለግሪድ ሲስተም (ለምሳሌ፣፣፣፣፣ ወዘተ.) የሲኤስኤስ ክፍሎችን `.container`ማመንጨት `.row`ያስችላል `.col-md-1`።
`$enable-caret`	`true`(ነባሪ) ወይም`false`	በ ላይ የውሸት ንጥረ ነገር እንክብካቤን ያነቃል `.dropdown-toggle`።
`$enable-print-styles`	`true`(ነባሪ) ወይም`false`	ህትመትን ለማመቻቸት ቅጦችን ያነቃል።

ቀለም

ብዙዎቹ የBootstrap የተለያዩ ክፍሎች እና መገልገያዎች የተገነቡት በሳስ ካርታ ውስጥ በተገለጹ ተከታታይ ቀለሞች ነው። ተከታታይ ደንቦችን በፍጥነት ለማመንጨት ይህ ካርታ በ Sass ውስጥ መዞር ይችላል።

ሁሉም ቀለሞች

በ Bootstrap 4 ውስጥ የሚገኙ ሁሉም ቀለሞች እንደ Sass ተለዋዋጮች እና scss/_variables.scssበፋይል የ Sass ካርታ ይገኛሉ። ይህ በቀጣዮቹ ትንንሽ ልቀቶች ላይ ተጨማሪ ጥላዎችን ለመጨመር ይስፋፋል፣ ልክ አስቀድመን እንዳካተትነው የግራጫ ቤተ-ስዕል ።

ሰማያዊ

ኢንዲጎ

ሐምራዊ

ሮዝ

ቀይ

ብርቱካናማ

ቢጫ

አረንጓዴ

ሻይ

ሲያን

በእርስዎ Sass ውስጥ እነዚህን እንዴት መጠቀም እንደሚችሉ እነሆ፡-

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

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

የቀለም መገልገያ ክፍሎች ለማቀናበር colorእና background-color.

ለወደፊቱ፣ ከታች ያሉትን ግራጫማ ቀለሞች እንዳደረግነው የሳስ ካርታዎችን እና ተለዋዋጮችን ለእያንዳንዱ ቀለም ጥላዎች ለማቅረብ አላማ እናደርጋለን።

የገጽታ ቀለሞች

የቀለም መርሃግብሮችን ለመፍጠር አነስ ያለ የቀለም ቤተ-ስዕል ለመፍጠር የሁሉም ቀለሞች ንዑስ ስብስብ እንጠቀማለን፣ እንዲሁም እንደ Sass ተለዋዋጮች እና የ Sass ካርታ በ Bootstraps scss/_variables.scssፋይል ውስጥ ይገኛል።

ዋና

ሁለተኛ ደረጃ

ስኬት

አደጋ

ማስጠንቀቂያ

መረጃ

ብርሃን

ጨለማ

ግራጫዎች

scss/_variables.scssበፕሮጀክትዎ ላይ ወጥነት ላለው ግራጫማ ጥላዎች ሰፊ የሆነ የግራጫ ተለዋዋጮች ስብስብ እና የSass ካርታ ።

100

200

300

400

500

600

700

800

900

በ ውስጥ scss/_variables.scss፣ የ Bootstrap ቀለም ተለዋዋጮች እና የሳስ ካርታ ያገኛሉ። $colorsየ Sass ካርታ ምሳሌ ይኸውና ፡-

$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}ተለዋዋጮችን እና ይህን የሳስ ካርታ ለመጠቀም እቅድ ያውጡ።

አካላት

@eachብዙዎቹ የBootstrap ክፍሎች እና መገልገያዎች በ Sass ካርታ ላይ በሚደጋገሙ ቀለበቶች የተገነቡ ናቸው ። ይህ በተለይ በእኛ የአንድ አካል $theme-colorsልዩነቶችን ለመፍጠር እና ለእያንዳንዱ መግቻ ነጥብ ምላሽ ሰጪ ልዩነቶችን ለመፍጠር አጋዥ ነው። እነዚህን የሳስ ካርታዎች ሲያበጁ እና እንደገና ሲያጠናቅቁ፣ ለውጦችዎ በእነዚህ ዑደቶች ውስጥ ሲንፀባረቁ ያያሉ።

መቀየሪያዎች

ብዙዎቹ የ Bootstrap ክፍሎች የተገነቡት በመሠረታዊ-መቀየሪያ ክፍል አቀራረብ ነው። ይህ ማለት የአጻጻፉ አብዛኛው ክፍል ወደ ቤዝ ክፍል (ለምሳሌ .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);
}

ምላሽ ሰጪ

እነዚህ የ Sass loops በቀለም ካርታዎች ብቻ የተገደቡ አይደሉም። እንዲሁም የእርስዎን ክፍሎች ወይም መገልገያዎች ምላሽ ሰጪ ልዩነቶች ማመንጨት ይችላሉ። @eachየ $grid-breakpointsSass ካርታውን የሚዲያ መጠይቅን የምናጠቃልልበትን ምላሽ ሰጪ የጽሑፍ አሰላለፍ መገልገያዎችን እንደ ምሳሌ እንውሰድ ።

@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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ምሳሌዎች

የሲኤስኤስ ተለዋዋጮች ከ 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);
  }
}