ساس
استخدم ملفات 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
and عند استيراد Bootstrap وتجميعه عبر npm: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/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 كما استخدمناها ووسعناها بأنفسنا. أثناء تخصيص الخرائط المضمنة ، قد تواجه أخطاء عند استخدام مفتاح خريطة Sass معين.
primary
على سبيل المثال ، نستخدم المفاتيح success
و و و من للروابط والأزرار وحالات النموذج. يجب ألا يؤدي استبدال قيم هذه المفاتيح إلى حدوث مشكلات ، ولكن قد تتسبب إزالتها في حدوث مشكلات في تجميع Sass. في هذه الحالات ، ستحتاج إلى تعديل كود Sass الذي يستخدم هذه القيم.danger
$theme-colors
المهام
الألوان
بجانب خرائط Sass التي لدينا ، يمكن أيضًا استخدام ألوان السمات كمتغيرات قائمة بذاتها ، مثل $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
يمكنك تفتيح أو تغميق الألوان باستخدام Bootstrap's 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
) بناءً على اللون الأساسي المحدد. هذه الوظيفة مفيدة بشكل خاص للمزج أو الحلقات حيث تقوم بإنشاء فئات متعددة.
على سبيل المثال ، لإنشاء عينات ألوان من $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
الوظيفة ، يجب اقتباس عناوين URL للبيانات.
إضافة وطرح وظائف
نستخدم الدوال add
و subtract
التفاف calc
وظيفة CSS. الغرض الأساسي من هذه الوظائف هو تجنب الأخطاء عند تمرير 0
قيمة "بدون وحدة" في calc
تعبير. ستعرض تعبيرات مثل calc(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
}
}