--- title: BS Sass Variables tagline: Fine-tune a CSS Build date: 2023-06-13 description: > J1 Template is a Bootstrap V5 website template for the static site generator Jekyll. The Sass files in Bootstrap provide a modular and flexible approach to customizing the framework. They allow to override default variables, extend the existing styles to tailor Bootstrap's appearance and behavior to your needs. keywords: Jekyll, Theme, JekyllOne, Turorial, Bootstrap, SASS, Variables categories: [ Tutorial ] tags: [ Bootstrap, SASS ] image: path: /assets/images/modules/attics/1920x1280/mohammad-rahmani.jpg width: 1920 height: 1280 fab_menu_id: open_toc regenerate: true permalink: /pages/public/learn/bs_sass_variables/ resources: [ animate, clipboard, lightbox, rouge] resource_options: - attic: slides: - url: /assets/images/modules/attics/1920x1280/mohammad-rahmani.jpg alt: Photo by Mohammad Rahmani badge: type: unsplash author: Mohammad Rahmani href: https://unsplash.com/de/@afgprogrammer --- // Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid: // Set (local) page attributes here // ----------------------------------------------------------------------------- // :page--attr: // Load Liquid procedures // ----------------------------------------------------------------------------- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%} // Load page attributes // ----------------------------------------------------------------------------- {% include {{load_attributes}} scope="all" %} // Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [role="dropcap"] Sass (Syntactically Awesome Style Sheets) is a *CSS preprocessor* that extends the capabilities of CSS. It allows to write more organized and maintainable stylesheets by introducing variables, mixins, nesting, and other powerful features. The Sass files in Bootstrap provide a modular and flexible approach to customizing the framework. They allow to override default variables, and extend the existing styles to tailor Bootstrap's appearance and behavior to your needs. == Variables When using Bootstrap with Sass, you can access a set of Sass variables that allow you to customize various aspects of the framework. These variables are defined in Bootstrap's _variables. scss file, which you can modify to suit your project's needs. Bootstrap allows you to leverage most of the element, like the *accordions*, *buttons* or *cards*, making it easier to manage and maintain your stylesheets Additionally, Sass allows you to organize your CSS code more effectively and reuse styles across your project. === Accordion mdi:bootstrap[18px, mdi-md-deep-purple-400] https://getbootstrap.com/docs/5.3/components/accordion/[Bootstrap Docs {char-middot} Accordion, {browser-window--new}] Build vertically collapsing elements in combination with the BS Collapse *JavaScript plugin.* // include::{tabledir}/accordion.asciidoc[] include::{documentdir}/accordion.asciidoc[] === Alerts include::{documentdir}/alerts.asciidoc[] === Badges include::{documentdir}/badges.asciidoc[] === Body include::{documentdir}/body.asciidoc[] === Breadcrumbs include::{documentdir}/breadcrumbs.asciidoc[] === Buttons include::{documentdir}/buttons.asciidoc[] === Cards include::{documentdir}/cards.asciidoc[] === Carousel include::{documentdir}/carousel.asciidoc[] === Close include::{documentdir}/close.asciidoc[] === Code include::{documentdir}/code.asciidoc[] === Color System include::{documentdir}/color_system.asciidoc[] === Components Define common padding and border radius sizes and more. include::{documentdir}/components.asciidoc[] === Dropdowns Dropdown menu container and contents. include::{documentdir}/dropdowns.asciidoc[] === Figures include::{documentdir}/figures.asciidoc[] === Forms include::{documentdir}/forms.asciidoc[] === Gradient [source, sass, role="noclip"] ---- // The gradient which is added to components if `$enable-gradients` is `true` // This gradient is also added to elements with `.bg-gradient` $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; ---- === Grid include::{documentdir}/grid.asciidoc[] === Links include::{documentdir}/links.asciidoc[] === List Groups include::{documentdir}/list_groups.asciidoc[] === Modals include::{documentdir}/modals.asciidoc[] === Navbar include::{documentdir}/navbar.asciidoc[] === Navs include::{documentdir}/navs.asciidoc[] === Offcanvas include::{documentdir}/offcanvas.asciidoc[] === Options include::{documentdir}/options.asciidoc[] === Pagination include::{documentdir}/pagination.asciidoc[] === Paragraph include::{documentdir}/pagination.asciidoc[] === Placeholders include::{documentdir}/paragraph.asciidoc[] === Popovers include::{documentdir}/popovers.asciidoc[] === Position Define the edge positioning anchors of the position utilities. include::{documentdir}/position.asciidoc[] === Progress Bars include::{documentdir}/progress_bars.asciidoc[] === Spacing Control the default styling of most Bootstrap elements by modifying these variables. Mostly focused on spacing. You can add more entries to the `$spacers` map, should you need more variation. include::{documentdir}/spacing.asciidoc[] === Spinners include::{documentdir}/spinners.asciidoc[] === Tables Customizes the `.table` component with basic values, each used across all table variations. include::{documentdir}/tables.asciidoc[] === Thumbnails include::{documentdir}/thumbnails.asciidoc[] === Toasts include::{documentdir}/toasts.asciidoc[] === Tooltips include::{documentdir}/tooltips.asciidoc[] === Typography Font, line-height, and color for body text, headings, and more. include::{documentdir}/typography.asciidoc[] === Z-Index WARNING: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together. include::{documentdir}/z_index.asciidoc[]