사스

소스 Sass 파일을 활용하여 변수, 맵, 믹스인 및 함수를 활용하여 더 빠르게 빌드하고 프로젝트를 사용자 정의할 수 있습니다.

이 페이지에서

소스 Sass 파일을 활용하여 변수, 맵, 믹스인 등을 활용하십시오.

파일 구조

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

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

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

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

가져오기

에서 custom.scssBootstrap의 소스 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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/maps";
@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

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

스타터 프로젝트로 npm을 통해 부트스트랩을 시작하세요! twbs /bootstrap-npm-starter 템플릿 저장소로 이동하여 자신의 npm 프로젝트에서 부트스트랩을 빌드하고 사용자 정의하는 방법을 확인하십시오. Sass 컴파일러, Autoprefixer, Stylelint, PurgeCSS 및 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하십시오. $theme-colors다음에서 정의 직후 variables와 사용 전에 요구 사항 사이에 삽입해야 합니다 maps.

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

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 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(웹 콘텐츠 접근성 지침) 대비 요구 사항 을 충족하기 위해 작성자 는 매우 적은 예외를 제외 하고 최소 텍스트 색상 대비 4.5:1 및 텍스트가 아닌 최소 색상 대비 3:1 을 제공해야 합니다.

이를 돕기 위해 color-contrastBootstrap에 함수를 포함했습니다. 지정된 기본 색상을 기반으로 밝은( ), 어두운( ) 또는 검은색( ) 대비 색상 을 자동으로 반환하기 위해 색 공간 의 상대 휘도 를 기반으로 대비 임계값을 계산 하는 WCAG 대비 비율 알고리즘 을 사용합니다. 이 함수는 여러 클래스를 생성하는 믹스인 또는 루프에 특히 유용합니다.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
  }
}