빠르고 더러운 부트 스트랩은 런타임에 재정의합니다

Bootstrap 5.2 이상은이 기사에 설명 된 방법에 대한 솔루션을 제공했습니다. 따라서 Bootstrap 5.2 이상을 사용하는 경우 CSS 변수를 직접 사용하여 사용자 정의 재정의를 사용할 수 있습니다.

이 구식 웹 프론트 엔드 프레임 워크 인 Bootstrap은 다른 사람들의 사랑을 받고 있으며 어떤 사람들은 그것을 강조합니다. 어떤 관점을 취하든, 그것은 광범위한 응용 프로그램을 갖춘 강력한 UI 프레임 워크이며, 대부분의 사람들은 기본 사항을 이해하고 예측 가능한 결과를 제공합니다.

부트 스트랩에는 자체 디자인 철학이 있습니다. 특정 방식으로 HTML을 빌드하고 특정 방식으로 스타일을 덮어 쓰고 특정 방식으로 핵심 파일을 구축하며 웹 사이트에 특정 방식으로 포함해야합니다. 일반적으로 동료가 잘못된 부트 스트랩 코드를 쓰지 않는 한 괜찮습니다. 그러나 모든 사용 사례를 다루는 것은 아닙니다.

부트 스트랩은 서버 측에서 생성되는 경향이 있으며 런타임에 스타일을 덮어 쓰는 것을 좋아하지 않습니다. 응용 프로그램에서 일종의 시각적 테마 기능을 구현 해야하는 경우 Bootstrap은 각 테마에 대해 별도의 스타일 시트를 생성하고 필요한 경우 스타일 시트를 토글하는 것이 좋습니다. 사용자에게 사전 정의 된 테마를 제공하는 경우이를 수행하는 좋은 방법입니다. 그러나 사용자 정의 테마를 원한다면 어떻게해야합니까? SASS를 실행하고 새 스타일 시트를 컴파일하여 서버에 저장하기 위해 응용 프로그램을 설정할 수 있지만 많은 작업이 필요합니다. 또한 백엔드 직원 및 DevOps 팀과 통신해야합니다. 이는 기본 및 보조 색상을 교체하려면 많은 문제가됩니다.

이것이 제가 당시 직면했던 것입니다.

고정 레이아웃이있는 django 및 vue를 사용하여 다중 사용자 SaaS 응용 프로그램을 구축하고 있지만 각 사용자 계정에 대한 브랜드 색상을 변경하고 자동 기본 색상 테마가 있어야합니다. 또 다른 요구 사항은 새 사용자를 추가 할 때마다 응용 프로그램을 재배치하지 않아야합니다. 마지막으로, 모든 백엔드와 DevOps 개발자는 현재 다른 프로젝트로 바쁘기 때문에 이것을 단독으로 고쳐야합니다.

런타임에 Sass를 컴파일하고 싶지 않기 때문에 스타일 시트를 만들어 페이지에 주입 할 수 있지만 색상에 중점을두기 때문에 좋은 솔루션은 아닙니다. 컴파일 된 부트 스트랩 스타일 시트는 색상 값을 명시적인 16 진수 값으로 렌더링하고 스타일 시트에는 23 개의 메인 블루 인스턴스가 있습니다. 기본 색상만으로는 각 인스턴스를 덮어 쓰고 2 차 색상, 경고 색상, 위험 색상 및 변경하려는 다른 모든 규칙 및 색상에 대해 다시 표준화해야합니다. 복잡하고 많은 작업이 있습니다. 나는 그렇게하고 싶지 않습니다.

다행히이 새로운 응용 프로그램은 Internet Explorer 11을 지원할 필요가 없으므로 CSS 변수를 사용할 수 있습니다. 그것들은 또한 훌륭하고 스타일 시트가로드 된 후에 정의 할 수 있으며, 모든 방향으로 흐르고 원하는 모든 색상을 변경하십시오. Bootstrap은 다음과 같은 큰 변수 목록을 생성하므로 단순해야합니다.

이 시점에서 부트 스트랩은 스타일 시트의 일부 값을 변수로 만 렌더링 하고이 변수 목록은 전적으로 최종 사용자 사용을위한 것임을 알게되었습니다. 이 목록의 대부분의 변수는 스타일 시트의 나머지 부분에서 참조되지 않으므로이를 재정의하면 효과가 없습니다. (그러나 향후 더 나은 런타임 가변 지원이 제공 될 수 있다는 점은 주목할 가치가 있습니다.)

따라서 Bootstrap 스타일 시트가 정적 색상 값이 아닌 서버 측에서 작동 할 수있는 CSS 변수로 렌더링되기를 원합니다. 색상 변수를 CSS 변수로 설정하면 SASS가 컴파일되지 않습니다. Sass를 만들기위한 몇 가지 영리한 트릭이 있지만 (여기서 하나 더, 하나 더) 분기 부트 스트랩이 필요하며 업그레이드 경로에서 벗어나면 내 앱이 추가하지 않을 취약성을 제공합니다. 내가 정직하다면,이 솔루션을 구현하지 않는 진짜 이유는 Sass 컴파일러와 함께 일하는 방법을 알 수 없기 때문입니다. 그러나 당신은 더 나은 행운을 가질 수 있습니다.

여기에서 내가 선호하는 워크 플로를 설명 할 가치가 있다고 생각합니다. 나는 스타일 시트를 만들고 편집 된 스타일 시트를 저장소에 제출하기 위해 개발 기계에서 Sass를 로컬로 운영하는 것을 선호합니다. 모범 사례 권장 사항은 배포 중에 스타일 시트를 컴파일해야하지만 이는 정확하지만 영구적으로 이해되는 스타트 업을 위해 노력합니다. 나는 그것을 좋아하기 때문에 Sass를 사용하지만, 그것은 분명히 내 작업의 주제이며 SASS 빌드를 다양한 배포 파이프 라인과 통합 할 시간, 능력 또는 정신적 힘이 없습니다.

그것은 또한 일종의 법적 악한 자기 방어입니다. 나는 우리의 전체 스택 개발자들이 내 정교한 스타일과 연락을 취하고 그들이 원하는 것을 쓰기 시작하기를 원하지 않습니다. 잘! 그들은 나에게 도움을 요청할 수 있었고 그것이 바로 내가 원하는 방식이었습니다.

이 모든 것이 다음과 같이 말합니다. 스타일 시트를 그 안에있는 변수로 렌더링 할 수 없다면 스타일 시트 가 컴파일 된 후 스타일 시트 에 주입하는 것을 방해 할 수있는 것은 아무것도 없습니다.

수색 및 교체의 힘을 목격하십시오!

우리가해야 할 일은 부트 스트랩으로 들어가서 교체하고자하는 색상을 찾는 것입니다. 편리하게 편리하게 위치합니다. 편리한 스타일의 스타일 시트의 상단에 있습니다.

 <code>:root { --bs-blue: #002E6D; --bs-indigo: #6610F2; // ... other variables }</code>

구식 부트 스트랩 블루 인 BS-Primary의 예를 들어 값을 얻으십시오. Gulp를 사용하여 스타일 시트를 컴파일하므로 Gulpfile.js의 SASS 작업 기능을 살펴 보겠습니다.

 var gulp = 요구 ( 'gulp');
var sass = require ( 'gulp-sass') (요구 ( 'sass'));
var sourcemaps = require ( 'gulp-sourcemaps');
var gulpreplace = require ( 'gulp-replace');

함수 sassCompile () {
  return gulp.src ( 'static/sass/project.scss')
    .pipe (sourcemaps.init ())
    .pipe (sass ({outputStyle : 'expeded'}))))
    .pipe (sourcemaps.write ( '.'))
    .pipe (gulpreplace (/#002e6d/ig, 'var (-ct-primary)'))
    .pipe (gulp.dest ( 'static/css/'));
}
Exports.sass = sasscompile;

스타일 시트를 컴파일 한 다음 봅니다.

 : 루트 {
  -BS- 블루 : var (-CT-Primary);
  -BS-Indigo : #6610f2;
  // ... 다른 변수
}

좋아요 메인 색상과 "파란색"이 모두 변경됩니다. 이것은 미묘한 기술이 아닙니다. 나는 그것을 빠르고 거칠게 부르지 만, 당신이 필요한 경우 더 미세한 컬러 교체 제어를 얻는 것은 매우 쉽습니다. 예를 들어, "파란색"과 "메인"을 별도의 값으로 유지하려면 SASS로 이동하여 $ blue 및 $ 1 차 SASS 변수를 다른 값으로 재정의 한 다음 원하는대로 개별적으로 찾아 교체 할 수 있습니다.

다음으로 응용 프로그램에서 새 기본 변수 값을 정의해야합니다. HTML 헤더 에서이 작업을 수행하는 것은 매우 간단합니다.

<link href="/static/css/project.css" rel="stylesheet">
<style>
  :root {
    --ct-primary: #002E6D;
  }
</style>

실행하면 모든 것이 나타납니다. 파란색이어야하는 모든 것은 파란색입니다. 이 과정을 몇 번 반복하면 부트 스트랩 스타일 시트에서 많은 색상을 갑자기 제어 할 수 있습니다. 이것들은 내가 사용자에게 제공하기로 선택한 변수와 기본 색상 값입니다.

 --ct- 프라이드 : #002e6d;
-CT-Primary-Hover : #00275d;
// ... 다른 변수

이제 재미가 시작됩니다! 여기에서 필요에 따라 이러한 기본값을 직접 조작하거나 기본값 아래의 루트 스타일을 추가하여 원하는 색상 만 덮어 쓸 수 있습니다. 또는 나처럼, 텍스트 필드를 사용자 프로파일에 넣는 다음 : 루트 스타일을 제목에 출력하고 필요한 모든 것을 덮어 씁니다. 이제 스타일 시트를 다시 컴파일하거나 미친 듯이 런타임에 부트 스트랩을 무시할 수 있습니다.

이것은 확실히 우아한 솔루션은 아니지만 개발자가 수년간 해결하려고하는 매우 구체적인 사용 사례를 해결합니다. 그리고 이것은 Bootstrap이 런타임에 변수를 쉽게 덮어 쓸 수 있도록 결정하기 전에 매우 효율적인 솔루션으로 입증되었습니다.

위 내용은 빠르고 더러운 부트 스트랩은 런타임에 재정의합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!