សាស
ប្រើប្រាស់ឯកសារ Sass ប្រភពរបស់យើង ដើម្បីទាញយកអត្ថប្រយោជន៍ពីអថេរ ផែនទី ល្បាយ និងមុខងារ ដើម្បីជួយអ្នកបង្កើតបានលឿនជាងមុន និងកំណត់គម្រោងរបស់អ្នកតាមបំណង។
ប្រើប្រាស់ឯកសារ Sass ប្រភពរបស់យើងដើម្បីទាញយកអត្ថប្រយោជន៍ពីអថេរ ផែនទី ល្បាយ និងច្រើនទៀត។
រចនាសម្ព័ន្ធឯកសារ
នៅពេលណាដែលអាចធ្វើទៅបាន ជៀសវាងការកែប្រែឯកសារស្នូលរបស់ Bootstrap ។ សម្រាប់ Sass មានន័យថាបង្កើតសន្លឹករចនាប័ទ្មផ្ទាល់ខ្លួនរបស់អ្នកដែលនាំចូល Bootstrap ដូច្នេះអ្នកអាចកែប្រែ និងពង្រីកវាបាន។ សន្មតថាអ្នកកំពុងប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ដូចជា npm អ្នកនឹងមានរចនាសម្ព័ន្ធឯកសារដែលមើលទៅដូចនេះ៖
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
ប្រសិនបើអ្នកបានទាញយកឯកសារប្រភពរបស់យើង ហើយមិនប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ អ្នកនឹងចង់រៀបចំអ្វីមួយដែលស្រដៀងនឹងរចនាសម្ព័ន្ធនោះដោយដៃ ដោយរក្សាឯកសារប្រភពរបស់ Bootstrap ដាច់ដោយឡែកពីខ្លួនអ្នក។
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
ការនាំចូល
នៅក្នុងរបស់ custom.scss
អ្នក អ្នកនឹងនាំចូលឯកសារ Sass ប្រភពរបស់ Bootstrap ។ អ្នកមានជម្រើសពីរ៖ រួមបញ្ចូល Bootstrap ទាំងអស់ ឬជ្រើសរើសផ្នែកដែលអ្នកត្រូវការ។ យើងលើកទឹកចិត្តអ្នកចុងក្រោយ ទោះបីជាត្រូវដឹងថាមានតម្រូវការ និងភាពអាស្រ័យមួយចំនួននៅទូទាំងសមាសធាតុរបស់យើង។ អ្នកក៏នឹងត្រូវបញ្ចូល JavaScript មួយចំនួនសម្រាប់កម្មវិធីជំនួយរបស់យើង។
// 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/root";
@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";
// 5. Add additional custom code here
ជាមួយនឹងការរៀបចំនោះ អ្នកអាចចាប់ផ្តើមកែប្រែអថេរ និងផែនទី Sass ណាមួយនៅក្នុងរបស់អ្នក custom.scss
។ អ្នកក៏អាចចាប់ផ្តើមបន្ថែមផ្នែកនៃ Bootstrap នៅក្រោម // Optional
ផ្នែកតាមតម្រូវការ។ យើងស្នើឱ្យប្រើជង់នាំចូលពេញលេញពី bootstrap.scss
ឯកសាររបស់យើងជាចំណុចចាប់ផ្តើមរបស់អ្នក។
លំនាំដើមអថេរ
រាល់អថេរ Sass ក្នុង Bootstrap រួមមាន !default
ទង់ដែលអនុញ្ញាតឱ្យអ្នកបដិសេធតម្លៃលំនាំដើមរបស់អថេរនៅក្នុង Sass របស់អ្នកដោយមិនចាំបាច់កែប្រែកូដប្រភពរបស់ Bootstrap ។ ចម្លង និងបិទភ្ជាប់អថេរតាមតម្រូវការ កែប្រែតម្លៃរបស់វា និងដក !default
ទង់ចេញ។ ប្រសិនបើអថេរត្រូវបានកំណត់រួចហើយ នោះវានឹងមិនត្រូវបានចាត់ចែងឡើងវិញដោយតម្លៃលំនាំដើមនៅក្នុង Bootstrap ទេ។
អ្នកនឹងឃើញបញ្ជីពេញលេញនៃអថេររបស់ Bootstrap នៅក្នុង scss/_variables.scss
. អថេរមួយចំនួនត្រូវបានកំណត់ទៅ null
អថេរទាំងនេះមិនបញ្ចេញលក្ខណៈសម្បត្តិទេ លុះត្រាតែពួកវាត្រូវបានបដិសេធក្នុងការកំណត់របស់អ្នក។
ការបដិសេធអថេរត្រូវតែកើតឡើងបន្ទាប់ពីមុខងាររបស់យើងត្រូវបាននាំចូល ប៉ុន្តែមុនពេលការនាំចូលដែលនៅសល់។
នេះជាឧទាហរណ៍ដែលផ្លាស់ប្តូរ background-color
និង color
សម្រាប់ <body>
ពេលនាំចូល និងចងក្រង Bootstrap តាមរយៈ npm៖
// 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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
ធ្វើម្តងទៀតតាមការចាំបាច់សម្រាប់អថេរណាមួយនៅក្នុង Bootstrap រួមទាំងជម្រើសសកលខាងក្រោម។
ផែនទីនិងរង្វិលជុំ
Bootstrap រួមបញ្ចូលផែនទី Sass មួយក្តាប់តូច ដែលជាគូតម្លៃសំខាន់ៗ ដែលធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការបង្កើតក្រុមគ្រួសារនៃ CSS ដែលពាក់ព័ន្ធ។ យើងប្រើផែនទី Sass សម្រាប់ពណ៌របស់យើង ចំណុចបំបែកក្រឡា និងច្រើនទៀត។ ដូចគ្នានឹងអថេរ Sass ដែរ ផែនទី Sass ទាំងអស់រួមបញ្ចូល !default
ទង់ជាតិ ហើយអាចត្រូវបានបដិសេធ និងពង្រីក។
ផែនទី Sass មួយចំនួនរបស់យើងត្រូវបានបញ្ចូលទៅក្នុងទទេតាមលំនាំដើម។ នេះត្រូវបានធ្វើដើម្បីអនុញ្ញាតឱ្យងាយស្រួលក្នុងការពង្រីកផែនទី Sass ដែលបានផ្តល់ឱ្យ ប៉ុន្តែមកជាមួយតម្លៃនៃការធ្វើឱ្យ ការដក ធាតុចេញពីផែនទីពិបាកជាងបន្តិច។
កែប្រែផែនទី
អថេរទាំងអស់នៅក្នុង $theme-colors
ផែនទីត្រូវបានកំណត់ថាជាអថេរឯកត្តជន។ ដើម្បីកែប្រែពណ៌ដែលមានស្រាប់នៅក្នុង $theme-colors
ផែនទីរបស់យើង សូមបន្ថែមខាងក្រោមទៅឯកសារ Sass ផ្ទាល់ខ្លួនរបស់អ្នក៖
$primary: #0074d9;
$danger: #ff4136;
នៅពេលក្រោយ អថេរទាំងនេះត្រូវបានកំណត់នៅក្នុង $theme-colors
ផែនទីរបស់ Bootstrap៖
$theme-colors: (
"primary": $primary,
"danger": $danger
);
បន្ថែមទៅផែនទី
បន្ថែមពណ៌ថ្មីទៅ $theme-colors
ឬផែនទីផ្សេងទៀត ដោយបង្កើតផែនទី Sass ថ្មីជាមួយនឹងតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ហើយបញ្ចូលវាជាមួយផែនទីដើម។ ក្នុងករណីនេះ យើងនឹងបង្កើត $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
. ត្រូវដឹងថាអ្នកត្រូវតែបញ្ចូលវារវាងតម្រូវការ និងជម្រើសរបស់យើង៖
// 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";
// etc
សោដែលត្រូវការ
Bootstrap សន្មត់ថាវត្តមាននៃសោជាក់លាក់មួយចំនួននៅក្នុង Sass maps ដូចដែលយើងបានប្រើ និងពង្រីកវាដោយខ្លួនឯង។ នៅពេលអ្នកប្ដូរផែនទីដែលបានរួមបញ្ចូលតាមបំណង អ្នកអាចជួបប្រទះនឹងបញ្ហាដែលគន្លឹះនៃផែនទី Sass ជាក់លាក់មួយកំពុងត្រូវបានប្រើប្រាស់។
ឧទាហរណ៍ យើងប្រើ គ្រាប់ចុច , និងពី primary
សម្រាប់ success
តំណ ប៊ូតុង និងស្ថានភាពទម្រង់។ ការជំនួសតម្លៃនៃសោទាំងនេះមិនគួរបង្ហាញបញ្ហានោះទេ ប៉ុន្តែការដកវាចេញអាចបណ្តាលឱ្យមានបញ្ហាក្នុងការចងក្រង Sass ។ នៅក្នុងករណីទាំងនេះ អ្នកនឹងត្រូវកែប្រែកូដ Sass ដែលប្រើតម្លៃទាំងនោះ។danger
$theme-colors
មុខងារ
ពណ៌
នៅជាប់នឹង ផែនទី Sass ដែល យើងមាន ពណ៌ស្បែកក៏អាចប្រើជាអថេរឯកត្តជនបានដែរ ដូចជា $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
អ្នកអាចធ្វើឱ្យពណ៌ភ្លឺ ឬងងឹតដោយប្រើ Bootstrap tint-color()
និង shade-color()
មុខងារ។ មុខងារទាំងនេះនឹងលាយពណ៌ជាមួយពណ៌ខ្មៅ ឬស មិនដូចមុខងារដើមរបស់ Sass 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 2.0 សម្រាប់កម្រិតពណ៌ អ្នកនិពន្ធ ត្រូវតែ ផ្តល់ សមាមាត្រកម្រិតពណ៌យ៉ាងហោចណាស់ 4.5:1 ដោយមានករណីលើកលែងតិចតួចបំផុត។
មុខងារបន្ថែមដែលយើងបញ្ចូលក្នុង Bootstrap គឺមុខងារកម្រិតពណ៌ color-contrast
។ វាប្រើប្រាស់ ក្បួនដោះស្រាយ WCAG 2.0 សម្រាប់ការគណនាកម្រិតកម្រិតពណ៌ដោយផ្អែកលើ ពន្លឺដែលទាក់ទងគ្នា ក្នុង sRGB
ចន្លោះពណ៌ដើម្បីត្រឡប់ពន្លឺ ( #fff
), ងងឹត ( #212529
) ឬខ្មៅ ( #000
) ពណ៌ផ្ទុយដោយផ្អែកលើពណ៌មូលដ្ឋានដែលបានបញ្ជាក់។ មុខងារនេះមានប្រយោជន៍ជាពិសេសសម្រាប់ mixins ឬ loops ដែលអ្នកកំពុងបង្កើត class ច្រើន។
ឧទាហរណ៍ ដើម្បីបង្កើតការគូសពណ៌ពី $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
យើងប្រើ escape-svg
មុខងារដើម្បីគេចចេញពី <
, >
និង #
តួអក្សរសម្រាប់រូបភាពផ្ទៃខាងក្រោយ SVG ។ នៅពេលប្រើ escape-svg
មុខងារ ទិន្នន័យ URIs ត្រូវតែត្រូវបានដកស្រង់។
មុខងារបន្ថែមនិងដក
យើងប្រើ មុខងារ add
និង subtract
មុខងារដើម្បីរុំមុខងារ CSS calc
។ គោលបំណងចម្បងនៃមុខងារទាំងនេះគឺដើម្បីជៀសវាងកំហុសនៅពេលដែល 0
តម្លៃ "unitless" ត្រូវបានបញ្ចូលទៅក្នុង calc
កន្សោមមួយ។ កន្សោមដូច calc(10px - 0)
នឹងបង្ហាញកំហុសនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតទាំងអស់ បើទោះបីជាត្រូវតាមគណិតវិទ្យាក៏ដោយ។
ឧទាហរណ៍ដែល calc មានសុពលភាព៖
$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);
}
ឧទាហរណ៍ដែល calc មិនត្រឹមត្រូវ៖
$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/
មាន 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
}
}