ساس

استخدم ملفات 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";

// 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. يمكنك أيضًا البدء في إضافة أجزاء من Bootstrap أسفل // Optionalالقسم حسب الحاجة. نقترح استخدام مكدس الاستيراد الكامل من ملفنا bootstrap.scssكنقطة انطلاق لك.

افتراضات متغيرة

يتضمن كل متغير Sass في Bootstrap !defaultعلامة تتيح لك تجاوز القيمة الافتراضية للمتغير في Sass الخاص بك دون تعديل كود مصدر Bootstrap. انسخ المتغيرات والصقها حسب الحاجة وعدّل قيمها وأزل !defaultالعلامة. إذا تم تعيين متغير بالفعل ، فلن تتم إعادة تعيينه بالقيم الافتراضية في Bootstrap.

ستجد القائمة الكاملة لمتغيرات Bootstrap بتنسيق scss/_variables.scss. يتم تعيين بعض المتغيرات على nullهذه المتغيرات لا تُخرج الخاصية ما لم يتم تجاوزها في التكوين الخاص بك.

يجب أن تأتي تجاوزات المتغيرات بعد استيراد وظائفنا ، ولكن قبل باقي عمليات الاستيراد.

في ما يلي مثال يغير لـ background-colorand عند استيراد 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/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 ، بما في ذلك الخيارات العامة أدناه.

ابدأ مع Bootstrap عبر npm من خلال مشروعنا المبدئي! توجه إلى مستودع قوالب twbs / bootstrap-npm-starter لمعرفة كيفية إنشاء Bootstrap وتخصيصه في مشروع npm الخاص بك. يتضمن برنامج Sass compiler و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons.

الخرائط والحلقات

يتضمن 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. كن على علم أنه يجب أن تُدرج $theme-colorsبين متطلباتنا بعد تعريفها variablesمباشرةً وقبل استخدامها في maps:

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

المفاتيح المطلوبة

يفترض 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) ، يجب على المؤلفين توفير حد أدنى لتباين ألوان النص يبلغ 4.5: 1 والحد الأدنى لتباين الألوان غير النصية بنسبة 3: 1 ، مع استثناءات قليلة جدًا.

للمساعدة في ذلك ، قمنا بتضمين color-contrastالوظيفة في Bootstrap. يستخدم خوارزمية نسبة التباين WCAG لحساب عتبات التباين بناءً على النصوع النسبي في 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
  }
}