やっと全貌の見えてきたBootstrap 4(α版)ですが、設定可能な変数が結構増えていました。
まだα版なのでこれからも変わると思いますが。
Bootstrap 3.3.5 と比較して、新たに追加された変数だけ挙げてみました。
全体の構造に関わる変数が多く追加されていますし、ButtonsやFormsなどの余白を細く設定できるようになっていました。
どの変数が何を設定できるのかは変数名を見ればだいたい分かるでしょう。
なお、変数の名称が変更されたものや、変数自体が取り止めになったものは含めていません。
(PanelやGlyphiconsなどがなくなったので、その辺の変数はごっそり消されています)
3から4への以降をお考えの場合などのご参考まで。
_variables.scss
// Colors
$gray-lightest: #f7f7f9 !default;
// Options
$enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: true !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
// Spacing
$spacer: 2rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$border-width: .0625rem !default;
// Grid breakpoints
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em,
// Medium screen / tablet
md: 48em,
// Large screen / desktop
lg: 62em,
// Extra large screen / wide desktop
xl: 75em
) !default;
// Grid containers
$container-max-widths: (
sm: 34rem, // 480
md: 45rem, // 720
lg: 60rem, // 960
xl: 72.25rem // 1140
) !default;
// Typography
$font-size-root: 16px !default;
$display1-size: 3.5rem !default;
$display2-size: 4.5rem !default;
$display3-size: 5.5rem !default;
$display4-size: 6rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$hr-border-width: $border-width;
// Buttons
$btn-padding-x: 1rem;
$btn-padding-y: .375rem;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: #fff !default;
$btn-secondary-border: #ccc !default;
$btn-padding-x-sm: .75rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.25rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .375rem !default;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-padding-x-sm: .75rem !default;
$input-padding-y-sm: .275rem !default;
$input-padding-x-lg: 1.25rem !default;
$input-padding-y-lg: .75rem !default;
// Form validation icons
$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==";
$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==";
$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=";
// Navbar
$navbar-dark-color: rgba(255,255,255,.5);
$navbar-dark-hover-color: rgba(255,255,255,.75);
$navbar-dark-active-color: rgba(255,255,255,1);
$navbar-dark-disabled-color: rgba(255,255,255,.25);
$navbar-light-color: rgba(0,0,0,.3);
$navbar-light-hover-color: rgba(0,0,0,.6);
$navbar-light-active-color: rgba(0,0,0,.8);
$navbar-light-disabled-color: rgba(0,0,0,.15);
// Pagination
$pagination-padding-x: .75rem !default;
$pagination-padding-y: .5rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-sm: .275rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-padding-y-lg: .75rem !default;