19
18

More than 5 years have passed since last update.

Bootstrap 4 alpha で新たに追加されたSCSS変数

Last updated at Posted at 2015-08-20

やっと全貌の見えてきた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;

19
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
18