ሳስ

በፍጥነት ለመገንባት እና ፕሮጀክትዎን ለማበጀት ከተለዋዋጮች፣ ካርታዎች፣ ድብልቅ ነገሮች እና ተግባራት ለመጠቀም የኛን የ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

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

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

ተለዋዋጭ ነባሪዎች

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

ሙሉውን የBootstrap ተለዋዋጮች ዝርዝር ውስጥ ያገኛሉ scss/_variables.scss። አንዳንድ ተለዋዋጮች ተቀናብረዋል null፣ እነዚህ ተለዋዋጮች በእርስዎ ውቅር ውስጥ ካልተሻሩ በስተቀር ንብረቱን አያወጡም።

ተለዋዋጭ መሻሮች ተግባሮቻችን ከመጡ በኋላ መምጣት አለባቸው፣ ነገር ግን ከውጪ ከሚመጡት ቀሪዎቹ በፊት።

Bootstrapን በ 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

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

በጀማሪ ፕሮጄክታችን በ npm በኩል በ Bootstrap ይጀምሩ! Bootstrapን በራስዎ npm ፕሮጀክት እንዴት መገንባት እና ማበጀት እንደሚችሉ ለማየት ወደ twbs /bootstrap-npm-starter አብነት ማከማቻ ይሂዱ። Sass compiler፣ Autoprefixer፣ Stylelint፣ PurgeCSS እና Bootstrap አዶዎችን ያካትታል።

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

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

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

ካርታ ቀይር

በካርታው ውስጥ ያሉት ሁሉም ተለዋዋጮች $theme-colorsእንደ ገለልተኛ ተለዋዋጮች ይገለፃሉ። በእኛ ካርታ ላይ ያለውን ቀለም ለመቀየር $theme-colors፣ ወደ ብጁ Sass ፋይልዎ የሚከተለውን ያክሉ።

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

በኋላ፣ እነዚህ ተለዋዋጮች በBootstrap $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ከትርጉሙ በኋላ ልክ በእኛ መስፈርቶች መካከል ማስገባት እንዳለብዎ ይወቁvariablesmaps

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

በBootstrap 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በ Bootstrap ውስጥ ያለውን ተግባር አካትተናል። በቀለም ቦታ ላይ ባለው አንጻራዊ ብርሃን ላይ በመመስረት የንፅፅር ገደቦችን ለማስላት የ WCAG ንፅፅር ሬሾ ስልተ-ቀመር ይጠቀማል ብርሃን ( ) ፣ ጨለማ ( ) ወይም ጥቁር ( ) በተጠቀሰው የመሠረት ቀለም ላይ የተመሠረተ ንፅፅር ቀለም። ይህ ተግባር በተለይ ብዙ ክፍሎችን ለሚያመነጩበት ድብልቅ ወይም loops ጠቃሚ ነው።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እንጠቀማለን ። ተግባሩን ሲጠቀሙ የውሂብ ዩአርአይዎች መጠቀስ አለባቸው።<>#escape-svg

ተግባራትን ይጨምሩ እና ይቀንሱ

የሲኤስኤስ ተግባርን ለመጠቅለል 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/ማውጫ የBootstrapን ክፍሎች የሚያንቀሳቅሱ እና እንዲሁም በእራስዎ ፕሮጀክት ላይ ጥቅም ላይ የሚውሉ በጣም ብዙ ድብልቅ ነገሮች አሉት።

የቀለም መርሃግብሮች

ለማህደረ 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
  }
}