사스
소스 Sass 파일을 활용하여 변수, 맵, 믹스인 및 함수를 활용하여 더 빠르게 빌드하고 프로젝트를 사용자 정의할 수 있습니다.
소스 Sass 파일을 활용하여 변수, 맵, 믹스인 등을 활용하십시오.
파일 구조
가능하면 부트스트랩의 핵심 파일을 수정하지 마십시오. Sass의 경우 이는 Bootstrap을 가져와 수정하고 확장할 수 있는 고유한 스타일시트를 만드는 것을 의미합니다. npm과 같은 패키지 관리자를 사용한다고 가정하면 다음과 같은 파일 구조를 갖게 됩니다.
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
소스 파일을 다운로드했고 패키지 관리자를 사용하지 않는 경우 해당 구조와 유사한 것을 수동으로 설정하고 Bootstrap의 소스 파일을 자신의 소스 파일과 별도로 유지하고 싶을 것입니다.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
가져오기
에서 custom.scss
Bootstrap의 소스 Sass 파일을 가져옵니다. 부트스트랩 전체를 포함하거나 필요한 부분을 선택하는 두 가지 옵션이 있습니다. 구성 요소 전체에 몇 가지 요구 사항과 종속성이 있음을 알고 있지만 후자를 권장합니다. 또한 플러그인에 대한 일부 JavaScript를 포함해야 합니다.
// 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@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";
@import "../node_modules/bootstrap/scss/helpers";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
해당 설정이 완료되면 에서 Sass 변수와 맵을 수정할 수 있습니다 custom.scss
. // Optional
필요에 따라 섹션 아래에 부트스트랩의 일부를 추가할 수도 있습니다 . 파일 의 전체 가져오기 스택을 bootstrap.scss
시작점으로 사용하는 것이 좋습니다.
변수 기본값
부트스트랩의 모든 Sass 변수에는 부트 !default
스트랩의 소스 코드를 수정하지 않고 자신의 Sass에서 변수의 기본값을 재정의할 수 있는 플래그가 포함되어 있습니다. 필요에 따라 변수를 복사하여 붙여넣고 값을 수정하고 !default
플래그를 제거합니다. 변수가 이미 할당된 경우 부트스트랩의 기본값으로 다시 할당되지 않습니다.
부트스트랩 변수의 전체 목록은 scss/_variables.scss
. 일부 변수는 로 설정되어 null
있으며 이러한 변수는 구성에서 재정의되지 않는 한 속성을 출력하지 않습니다.
변수 재정의는 함수를 가져온 후 나머지 가져오기 전에 와야 합니다.
다음은 npm을 통해 부트스트랩을 가져오고 컴파일할 때 background-color
및 color
를 변경하는 예입니다 .<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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
아래 전역 옵션을 포함하여 부트스트랩의 모든 변수에 대해 필요에 따라 반복합니다.
맵 및 루프
Bootstrap에는 관련 CSS 패밀리를 쉽게 생성할 수 있도록 하는 키 값 쌍인 소수의 Sass 맵이 포함되어 있습니다. 색상, 그리드 중단점 등에 Sass 맵을 사용합니다. Sass 변수와 마찬가지로 모든 Sass 맵에는 !default
플래그가 포함되어 있으며 재정의 및 확장이 가능합니다.
일부 Sass 맵은 기본적으로 빈 맵으로 병합됩니다. 이는 주어진 Sass 맵을 쉽게 확장할 수 있도록 하기 위한 것이지만 맵에서 항목을 제거하는 것이 약간 더 어려워지는 대가를 치르게 됩니다.
지도 수정
맵 의 모든 변수는 $theme-colors
독립형 변수로 정의됩니다. 맵 의 기존 색상을 수정하려면 $theme-colors
사용자 정의 Sass 파일에 다음을 추가하십시오.
$primary: #0074d9;
$danger: #ff4136;
나중에 이러한 변수는 Bootstrap의 $theme-colors
맵에서 설정됩니다.
$theme-colors: (
"primary": $primary,
"danger": $danger
);
지도에 추가
$theme-colors
사용자 정의 값으로 새 Sass 맵을 만들고 원래 맵과 병합하여 , 또는 다른 맵에 새 색상을 추가 합니다. 이 경우 새 $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";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
필수 키
부트스트랩은 우리가 직접 사용하고 확장할 때 Sass 맵 내에 특정 키가 있다고 가정합니다. 포함된 맵을 사용자 정의할 때 특정 Sass 맵의 키가 사용되는 경우 오류가 발생할 수 있습니다.
예를 들어 링크, 버튼 및 양식 상태에 대해 primary
, success
및 danger
키를 사용합니다. $theme-colors
이러한 키의 값을 교체하면 문제가 없지만 제거하면 Sass 컴파일 문제가 발생할 수 있습니다. 이러한 경우 해당 값을 사용하는 Sass 코드를 수정해야 합니다.
기능
그림 물감
우리가 가지고 있는 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의 대비 비율을 제공 해야 합니다 .
Bootstrap에 포함된 추가 기능은 색상 대비 기능 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`
}
SVG 탈출
이 기능을 사용하여 SVG 배경 이미지 의 , 및 문자 escape-svg
를 이스케이프합니다 . 함수 를 사용할 때 데이터 URI는 따옴표로 묶어야 합니다.<
>
#
escape-svg
더하기 및 빼기 기능
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);
}
믹신
우리 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
}
}