Source

테마 부트스트랩

쉬운 테마 및 구성 요소 변경을 위한 전역 스타일 기본 설정을 위한 새로운 내장 Sass 변수로 Bootstrap 4를 사용자 정의하십시오.

소개

Bootstrap 3에서 테마는 주로 LESS의 변수 재정의, 사용자 지정 CSS 및 dist파일에 포함된 별도의 테마 스타일시트에 의해 주도되었습니다. 약간의 노력으로 핵심 파일을 건드리지 않고 Bootstrap 3의 모양을 완전히 다시 디자인할 수 있습니다. 부트스트랩 4는 익숙하지만 약간 다른 접근 방식을 제공합니다.

이제 테마 지정은 Sass 변수, Sass 맵 및 사용자 정의 CSS로 수행됩니다. 더 이상 전용 테마 스타일시트가 없습니다. 대신 기본 제공 테마를 활성화하여 그라디언트, 그림자 등을 추가할 수 있습니다.

사스

소스 Sass 파일을 활용하여 변수, 맵, 믹스인 등을 활용하십시오. 우리 빌드에서 브라우저 반올림 문제를 방지하기 위해 Sass 반올림 정밀도를 6(기본값은 5)으로 높였습니다.

파일 구조

가능하면 부트스트랩의 핵심 파일을 수정하지 마십시오. Sass의 경우 이는 Bootstrap을 가져와 수정하고 확장할 수 있는 고유한 스타일시트를 만드는 것을 의미합니다. npm과 같은 패키지 관리자를 사용한다고 가정하면 다음과 같은 파일 구조를 갖게 됩니다.

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

소스 파일을 다운로드했고 패키지 관리자를 사용하지 않는 경우 해당 구조와 유사한 것을 수동으로 설정하고 Bootstrap의 소스 파일을 자신의 소스 파일과 별도로 유지하고 싶을 것입니다.

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

가져오기

에서 custom.scssBootstrap의 소스 Sass 파일을 가져옵니다. 부트스트랩 전체를 포함하거나 필요한 부분을 선택하는 두 가지 옵션이 있습니다. 구성 요소 전체에 몇 가지 요구 사항과 종속성이 있음을 알고 있지만 후자를 권장합니다. 또한 플러그인에 대한 일부 JavaScript를 포함해야 합니다.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

해당 설정이 완료되면 에서 Sass 변수와 맵을 수정할 수 있습니다 custom.scss. // Optional필요에 따라 섹션 아래에 부트스트랩의 일부를 추가할 수도 있습니다 . 파일 의 전체 가져오기 스택을 bootstrap.scss시작점으로 사용하는 것이 좋습니다.

변수 기본값

부트스트랩 4의 모든 Sass 변수에는 부트 !default스트랩의 소스 코드를 수정하지 않고 자체 Sass에서 변수의 기본값을 재정의할 수 있는 플래그가 포함되어 있습니다. 필요에 따라 변수를 복사하여 붙여넣고 해당 값을 수정하고 !default플래그를 제거합니다. 변수가 이미 할당된 경우 부트스트랩의 기본값으로 다시 할당되지 않습니다.

부트스트랩 변수의 전체 목록은 scss/_variables.scss. 일부 변수는 로 설정되어 null있으며 이러한 변수는 구성에서 재정의되지 않는 한 속성을 출력하지 않습니다.

동일한 Sass 파일 내에서 변수 재정의는 기본 변수 앞이나 뒤에 올 수 있습니다. 그러나 Sass 파일에서 재정의할 때 Bootstrap의 Sass 파일을 가져오기 전에 재정의해야 합니다.

다음은 npm을 통해 부트스트랩을 가져오고 컴파일할 때 background-color및 color를 변경하는 예입니다 .<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

아래 전역 옵션을 포함하여 부트스트랩의 모든 변수에 대해 필요에 따라 반복합니다.

맵 및 루프

Bootstrap 4에는 관련 CSS 패밀리를 쉽게 생성할 수 있도록 하는 키 값 쌍인 소수의 Sass 맵이 포함되어 있습니다. 색상, 그리드 중단점 등에 Sass 맵을 사용합니다. Sass 변수와 마찬가지로 모든 Sass 맵에는 !default플래그가 포함되어 있으며 재정의 및 확장이 가능합니다.

일부 Sass 맵은 기본적으로 빈 맵으로 병합됩니다. 이는 주어진 Sass 맵을 쉽게 확장할 수 있도록 하기 위한 것이지만 맵에서 항목을 제거하는 것이 약간 더 어려워지는 대가를 치르게 됩니다.

지도 수정

맵 의 기존 색상을 수정하려면 $theme-colors사용자 정의 Sass 파일에 다음을 추가하십시오.

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

지도에 추가

에 새 색상을 $theme-colors추가하려면 새 키와 값을 추가하십시오.

$theme-colors: (
  "custom-color": #900
);

지도에서 제거

$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";
...

필수 키

부트스트랩은 우리가 직접 사용하고 확장할 때 Sass 맵 내에 특정 키가 있다고 가정합니다. 포함된 맵을 사용자 정의할 때 특정 Sass 맵의 키가 사용되는 경우 오류가 발생할 수 있습니다.

예를 들어 링크, 버튼 및 양식 상태에 대해 primary, success및 danger키를 사용합니다. $theme-colors이러한 키의 값을 교체하면 문제가 없지만 제거하면 Sass 컴파일 문제가 발생할 수 있습니다. 이러한 경우 해당 값을 사용하는 Sass 코드를 수정해야 합니다.

기능

부트스트랩은 여러 Sass 기능을 활용하지만 일반 테마에는 하위 집합만 적용됩니다. 색상 맵에서 값을 가져오기 위한 세 가지 함수가 포함되어 있습니다.

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

이를 통해 v3의 색상 변수를 사용하는 것처럼 Sass 맵에서 하나의 색상을 선택할 수 있습니다.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

또한 지도에서 특정 수준 의 색상 을 가져오는 또 다른 기능이 $theme-colors있습니다. 음수 레벨 값은 색상을 밝게 하고 높은 레벨 값은 어둡게 합니다.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

실제로는 함수를 호출하고 두 개의 매개변수를 전달합니다. 색상 이름 $theme-colors(예: 기본 또는 위험)과 숫자 수준입니다.

.custom-element {
  color: theme-color-level(primary, -10);
}

추가 기능은 향후 추가되거나 사용자 정의 Sass를 추가하여 추가 Sass 맵에 대한 레벨 기능을 생성하거나 더 장황한 경우 일반 기능을 생성할 수 있습니다.

색상 대비

Bootstrap에 포함된 추가 기능은 색상 대비 기능 color-yiq입니다. YIQ 색상 공간 을 활용하여 지정된 기본 색상을 기반으로 밝은( #fff) 또는 어두운( ) 대비 색상 을 자동으로 반환합니다 . #111이 함수는 여러 클래스를 생성하는 믹스인 또는 루프에 특히 유용합니다.

예를 들어 $theme-colors지도에서 색상 견본을 생성하려면 다음을 수행합니다.

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

일회성 대비가 필요한 경우에도 사용할 수 있습니다.

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

색상 맵 기능을 사용하여 기본 색상을 지정할 수도 있습니다.

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

SVG 탈출

이 기능을 사용하여 SVG 배경 이미지 의 , 및 문자 escape-svg를 이스케이프합니다 . IE에서 배경 이미지를 제대로 렌더링하려면 이러한 문자를 이스케이프해야 합니다.<>#

더하기 및 빼기 기능

add및 함수를 사용 subtract하여 CSS 함수를 래핑합니다 calc. 이러한 함수의 주요 목적은 "단위 없는" 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);
}

Sass 옵션

내장된 사용자 정의 변수 파일로 Bootstrap 4를 사용자 정의하고 새로운 $enable-*Sass 변수로 전역 CSS 기본 설정을 쉽게 토글할 수 있습니다. 변수의 값을 재정의하고 npm run test필요에 따라 로 재컴파일하십시오.

scss/_variables.scssBootstrap의 파일 에서 주요 전역 옵션에 대해 이러한 변수를 찾아 사용자 정의할 수 있습니다 .

변하기 쉬운 가치 설명
$spacer 1rem(기본값) 또는 모든 값 > 0 프로그래밍 방식으로 스페이서 유틸리티 를 생성하기 위한 기본 스페이서 값을 지정합니다 .
$enable-rounded true(기본값) 또는false border-radius다양한 구성 요소에서 미리 정의된 스타일을 활성화합니다 .
$enable-shadows true또는 false(기본값) box-shadow다양한 구성 요소에서 미리 정의된 스타일을 활성화합니다 .
$enable-gradients true또는 false(기본값) background-image다양한 구성 요소의 스타일을 통해 미리 정의된 그라디언트를 활성화합니다 .
$enable-transitions true(기본값) 또는false transition다양한 구성 요소에서 미리 정의된 를 활성화합니다 .
$enable-prefers-reduced-motion-media-query true(기본값) 또는false 사용자의 브라우저/운영 체제 기본 설정에 따라 특정 애니메이션/전환을 억제 하는 prefers-reduced-motion미디어 쿼리 를 활성화합니다 .
$enable-hover-media-query true또는 false(기본값) 더 이상 사용되지 않음
$enable-grid-classes true(기본값) 또는false 그리드 시스템에 대한 CSS 클래스 생성을 활성화합니다(예: , , .container등 )..row.col-md-1
$enable-caret true(기본값) 또는false 에서 의사 요소 캐럿을 활성화합니다 .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(기본값) 또는false 비활성화되지 않은 버튼 요소에 "손" 커서를 추가합니다.
$enable-print-styles true(기본값) 또는false 인쇄 최적화를 위한 스타일을 활성화합니다.
$enable-responsive-font-sizes true또는 false(기본값) 반응형 글꼴 크기 를 활성화합니다 .
$enable-validation-icons true(기본값) 또는false background-image유효성 검사 상태에 대한 텍스트 입력 및 일부 사용자 정의 양식 내의 아이콘을 활성화합니다 .
$enable-deprecation-messages true또는 false(기본값) true에서 제거될 예정인 더 이상 사용되지 않는 믹스인 및 기능을 사용할 때 경고를 표시 하려면 로 설정하십시오 v5.

색깔

Bootstrap의 다양한 구성 요소와 유틸리티는 Sass 맵에 정의된 일련의 색상을 통해 구축됩니다. 이 맵은 일련의 규칙 집합을 빠르게 생성하기 위해 Sass에서 반복될 수 있습니다.

모든 색상

Bootstrap 4에서 사용 가능한 모든 색상은 scss/_variables.scss파일의 Sass 변수 및 Sass 맵으로 사용할 수 있습니다. 이것은 우리가 이미 포함 하고 있는 회색조 팔레트 와 마찬가지로 추가 음영을 추가하기 위해 후속 마이너 릴리스에서 확장될 것 입니다.

푸른
남빛
보라
분홍색
빨간색
주황색
노란색
녹색
물오리
시안

Sass에서 이것을 사용하는 방법은 다음과 같습니다.

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

색상 유틸리티 클래스 는 설정 color및 에 사용할 수도 있습니다 background-color.

앞으로 우리는 아래의 그레이스케일 색상으로 했던 것처럼 각 색상의 음영에 대한 Sass 맵과 변수를 제공하는 것을 목표로 할 것입니다.

테마 색상

모든 색상의 하위 집합을 사용하여 색 구성표를 생성하기 위한 더 작은 색상 팔레트를 생성합니다. 또한 부트스트랩 scss/_variables.scss파일에서 Sass 변수 및 Sass 맵으로도 사용할 수 있습니다.

주요한
중고등 학년
성공
위험
경고
정보
빛
어두운

회색

scss/_variables.scss프로젝트 전반에 걸쳐 일관된 회색 음영을 위해 광범위한 회색 변수 세트와 Sass 맵이 제공됩니다. 이것은 중성 회색보다는 미묘한 푸른 색조를 나타내는 경향이 있는 "쿨 그레이"입니다.

100
200
300
400
500
600
700
800
900

에서 scss/_variables.scssBootstrap의 색상 변수와 Sass 맵을 찾을 수 있습니다. 다음은 $colorsSass 맵의 예입니다.

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

맵 내에서 값을 추가, 제거 또는 수정하여 다른 많은 구성요소에서 값이 사용되는 방식을 업데이트합니다. 불행히도 현재로서는 모든 구성 요소가 이 Sass 맵을 사용하는 것은 아닙니다. 향후 업데이트에서는 이를 개선하기 위해 노력할 것입니다. 그때까지 ${color}변수와 이 Sass 맵을 사용할 계획입니다.

구성품

Bootstrap의 많은 구성 요소와 유틸리티는 @eachSass 맵을 반복하는 루프로 구축됩니다. 이는 당사에서 구성 요소의 변형을 생성 $theme-colors하고 각 중단점에 대한 반응형 변형을 생성하는 데 특히 유용합니다. 이러한 Sass 맵을 사용자 정의하고 다시 컴파일하면 이러한 루프에 반영된 변경 사항을 자동으로 볼 수 있습니다.

수정자

Bootstrap의 많은 구성 요소는 base-modifier 클래스 접근 방식으로 구축됩니다. 이는 스타일링의 대부분이 기본 클래스(예: .btn)에 포함되는 반면 스타일 변형은 수정자 클래스(예: .btn-danger)에 국한된다는 것을 의미합니다. 이러한 수정자 클래스는 수정자 클래스 $theme-colors의 수와 이름을 사용자 정의하기 위해 맵에서 빌드됩니다.

다음은 구성 요소와 모든 백그라운드 유틸리티 $theme-colors에 대한 수정자를 생성하기 위해 맵을 반복하는 방법에 대한 두 가지 예입니다 ..alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

반응형

이러한 Sass 루프는 컬러 맵에만 국한되지 않습니다. 또한 구성 요소 또는 유틸리티의 반응형 변형을 생성할 수도 있습니다. Sass 맵에 대한 @each루프를 미디어 쿼리 포함과 혼합하는 반응형 텍스트 정렬 유틸리티를 예로 들어 보겠습니다 .$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

를 수정해야 하는 경우 $grid-breakpoints변경 사항은 해당 맵을 반복하는 모든 루프에 적용됩니다.

CSS 변수

Bootstrap 4는 컴파일된 CSS에 약 24개의 CSS 사용자 정의 속성(변수) 을 포함합니다. 이를 통해 브라우저의 Inspector, 코드 샌드박스 또는 일반 프로토타이핑에서 작업할 때 테마 색상, 중단점 및 기본 글꼴 스택과 같이 일반적으로 사용되는 값에 쉽게 액세스할 수 있습니다.

사용 가능한 변수

여기에 포함된 변수가 있습니다( :root필수 사항에 유의). 그것들은 우리 _root.scss파일에 있습니다.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

예

CSS 변수는 Sass의 변수와 유사한 유연성을 제공하지만 브라우저에 제공되기 전에 컴파일할 필요가 없습니다. 예를 들어 여기에서는 CSS 변수를 사용하여 페이지의 글꼴 및 링크 스타일을 재설정합니다.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

중단점 변수

원래 CSS 변수(예: --breakpoint-md) 에 중단점을 포함했지만 미디어 쿼리에서는 지원되지 않지만 미디어 쿼리의 규칙 집합 내 에서는 계속 사용할 수 있습니다 . 이러한 중단점 변수는 JavaScript에서 사용할 수 있는 경우 이전 버전과의 호환성을 위해 컴파일된 CSS에 남아 있습니다. 사양에서 자세히 알아보세요 .

다음은 지원되지 않는 항목의 예입니다.

@media (min-width: var(--breakpoint-sm)) {
  ...
}

다음은 지원되는 항목 의 예입니다 .

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}