ساس

از فایل‌های Sass منبع ما برای استفاده از متغیرها، نقشه‌ها، میکس‌ها و توابع استفاده کنید تا به شما در ساخت سریع‌تر و سفارشی کردن پروژه کمک کند.

در این صفحه

از فایل‌های Sass منبع ما برای استفاده از متغیرها، نقشه‌ها، میکس‌ها و موارد دیگر استفاده کنید.

ساختار فایل

در صورت امکان، از تغییر فایل های اصلی بوت استرپ خودداری کنید. برای Sass، این به معنای ایجاد شیوه نامه خود است که Bootstrap را وارد می کند تا بتوانید آن را تغییر دهید و گسترش دهید. با فرض اینکه از یک مدیریت بسته مانند npm استفاده می کنید، ساختار فایلی به شکل زیر خواهید داشت:

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

اگر فایل‌های منبع ما را دانلود کرده‌اید و از یک مدیریت بسته استفاده نمی‌کنید، می‌خواهید به صورت دستی چیزی شبیه به آن ساختار را تنظیم کنید و فایل‌های منبع بوت استرپ را از فایل‌های منبع خود جدا نگه دارید.

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

واردات

در خود custom.scss، فایل‌های Sass منبع Bootstrap را وارد می‌کنید. شما دو گزینه دارید: همه 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";
@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. همچنین می‌توانید در // Optionalصورت نیاز بخش‌هایی از Bootstrap را در زیر بخش اضافه کنید. پیشنهاد می کنیم از پشته کامل واردات از bootstrap.scssفایل ما به عنوان نقطه شروع استفاده کنید.

پیش فرض های متغیر

هر متغیر Sass در Bootstrap شامل !defaultپرچمی است که به شما امکان می دهد بدون تغییر کد منبع Bootstrap، مقدار پیش فرض متغیر را در Sass خود لغو کنید. متغیرها را در صورت نیاز کپی و جایگذاری کنید، مقادیر آنها را تغییر دهید و !defaultپرچم را حذف کنید. اگر متغیری قبلاً اختصاص داده شده باشد، با مقادیر پیش‌فرض در Bootstrap دوباره تخصیص داده نمی‌شود.

لیست کامل متغیرهای Bootstrap را در scss/_variables.scss. برخی از متغیرها روی تنظیم شده‌اند null، این متغیرها ویژگی را خروجی نمی‌کنند مگر اینکه در پیکربندی شما لغو شوند.

نادیده گرفتن متغیرها باید پس از وارد شدن توابع ما، اما قبل از بقیه واردات انجام شود.

در اینجا یک مثال است که هنگام وارد کردن و کامپایل Bootstrap از طریق npm ، background-colorو colorfor را تغییر می‌دهد:<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، از جمله گزینه های جهانی زیر، این کار را تکرار کنید.

با پروژه شروع ما با بوت استرپ از طریق npm شروع کنید! به مخزن قالب twbs/bootstrap-npm-starter بروید تا نحوه ساخت و سفارشی کردن Bootstrap را در پروژه npm خودتان ببینید. شامل کامپایلر Sass، Autoprefixer، Stylelint، PurgeCSS، و نمادهای 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
);

به نقشه اضافه کنید

با ایجاد یک نقشه Sass جدید با مقادیر سفارشی خود و ادغام آن با نقشه اصلی، رنگ های جدید را به $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. توجه داشته باشید که باید آن را بین الزامات و گزینه های ما قرار دهید:

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

کلیدهای مورد نیاز

بوت استرپ وجود برخی از کلیدهای خاص را در نقشه های Sass فرض می کند که ما خودمان از آنها استفاده کرده و گسترش می دهیم. همانطور که نقشه های ارائه شده را سفارشی می کنید، ممکن است در هنگام استفاده از یک کلید Sass map خاص با خطاهایی مواجه شوید.

برای مثال، ما از کلیدهای، و از primaryبرای successپیوندها ، دکمه‌ها و حالت‌های فرم استفاده می‌کنیم. جایگزین کردن مقادیر این کلیدها نباید مشکلی ایجاد کند، اما حذف آنها ممکن است باعث ایجاد مشکلاتی در کامپایل Sass شود. در این موارد، شما باید کد Sass را تغییر دهید که از آن مقادیر استفاده می کند.danger$theme-colors

کارکرد

رنگ ها

در کنار نقشه‌های Sass که داریم، رنگ‌های تم نیز می‌توانند به عنوان متغیرهای مستقل استفاده شوند، مانند $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()با بوت استرپ و shade-color()توابع می توانید رنگ ها را روشن یا تیره کنید. lighten()این توابع رنگ‌ها را با سیاه یا سفید ترکیب می‌کنند، بر خلاف توابع و تابع‌های اصلی Sass 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 را با استثنائات بسیار کمی ارائه دهند .

یک تابع اضافی که در بوت استرپ قرار می دهیم، تابع کنتراست رنگ است 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`
}

Escape SVG

ما از escape-svgتابع برای فرار از <کاراکترها >و #برای تصاویر پس زمینه SVG استفاده می کنیم. هنگام استفاده از escape-svgتابع، URIهای داده باید نقل قول شوند.

توابع اضافه و تفریق

ما از توابع addو subtractبرای بسته بندی تابع CSS calcاستفاده می کنیم. هدف اصلی این توابع جلوگیری از خطا در هنگام ارسال مقدار "unitless" 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/تعداد زیادی میکس دارد که بخش های بوت استرپ را تامین می کند و همچنین می تواند در پروژه شما مورد استفاده قرار گیرد.

طرح های رنگی

یک ترکیب کوتاه برای 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
  }
}