LESS로 부트 스트랩 변수 재정의

LESS로 부트 스트랩 변수 재정의

---

나는 하루 종일 조사를 해왔는데, 부트 스트랩 을 커스터마이징하기위한 모범 사례를 배우는 데 시간을 할애 할 가치가 있다고 생각했기 때문입니다 .

http://twitter.github.io/bootstrap/customize.html 에서 요소를 선택적으로 사용자 지정하는 데 사용할 수있는 친숙한 페이지가 있음을 알 수 있지만 원본 부트 스트랩 소스 파일을 건드리지 않고 이보다 더 많은 제어 권한을 갖고 싶습니다.

우선, 기본적으로 그리드를 12 개 열에서 16 개 열로 변경하는 것을 테스트하고 싶었고이를 위해 내 자신의 변수 less 파일을 만들고 @gridColumns : 16을 추가했습니다. 이 파일에만이 사용자 정의를 다음과 같이 bootstrap.less 내부에 가져 왔습니다.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

그런 다음 WinLess를 사용 하여 bootstrap.less 파일을 컴파일하여 재정의 된 변수 가져 오기 호출로 새 bootstrap.css를 가져오고 CSS를 html 파일과 연결했지만 그리드는 16 열로 변경되지 않습니다.

누구든지 내가 뭘 잘못하고 있는지 지적 해 주시겠습니까?

---

저는 '타사'위치에 부트 스트랩이있는 유사한 프로젝트에서 작업 한 다음 mixins.less및 variables.less. 이를 위해 사용하는 패턴은 세 개의 파일을 추가하고 부트 스트랩을 전혀 건드리지 않습니다 (쉽게 교체 할 수 있음).

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

믹스 인 파일

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

그리드를 재정의 할 변수 파일

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let's pretend this is your site-specific override

실제로 가져온 파일 (또는 더 적은 컴파일러로 공급 됨) :

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

내 설정에서 이렇게하면 이상한 .span15 값이 포함 된 CSS 파일이 생깁니다 (업데이트하지 않았 @gridColumnWidth거나 @gridGutterWidth.row-fluid 값이 실제로 예상했던 방식으로 작동하기 때문에 다시 간단한 나눗셈으로 계산).

이 설정을 좋아하는 이유는 cd부트 스트랩 마스터에 들어가서 git pull특정 kludges를 병합하지 않고도 새 업데이트를 가져올 수 있기 때문입니다 (실제로 재정의 한 내용을 잘 처리 할 수 ​​있음).

The other thing is that it's very clear that shared.less is only using grid.less (rather than all of bootstrap). This is intentional since in most instances you don't need all of bootstrap, just a few parts of it to get going. Most bootstrap less files at least are nice in that their only hard dependencies are shared.less and mixins.less

if this still isn't working, then maybe WinLess is getting confused

---

Overriding variables after importing the original bootstrap.less works great for me:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

Compiling the above LESS source outputs properly customized Bootstrap CSS code.

Relevant info: http://lesscss.org/features/#variables-feature-lazy-loading

---

Another example that may help someone:

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';

---

An easy way is just to override the styles in your style doc, using the same name, and marking it as !important.

참고URL : https://stackoverflow.com/questions/16350779/bootstrap-variable-overriding-with-less