rails app에서 bootstrap-sass로 twitter 부트 스트랩을 사용하는 방법은 무엇입니까?

Question

나는 이것에 아주 새롭다, 그러나 나는 문제를 파악할 수 없다.

<div class="row-fluid"> 
    <div class="span2">Column1</div> 
    <div class="span6">Column2</div> 
</div> 

을 그리고 그것은 모두 잘 작동합니다 :

트위터 부트 스트랩에서 내가 사용할 수 있습니다. 하지만 내가 직접 내 html 파일로 SPANX 및 spanY을 쓰고 싶지 않아, 오히려 내가 예를 들어, 의미있는 클래스 이름을주고 싶습니다 :

<div class="user-container"> 
    <div class="user-filter">First Column</div> 
    <div class="user-list">Second Column</div> 
</div> 

내가 https://github.com/thomas-mcdonald/bootstrap-sass를 사용하고 있다는 사실을 감안할 때, 내가 어떻게해야 내 scss 파일을 작성 하시겠습니까? (두 개의 열이 표시되지 않습니다) 나는 다음을 시도했습니다, 그것은 작동하지 않습니다

@import "bootstrap"; 
@import "bootstrap-responsive"; 

.user-container { 
    @extend .row-fluid; 
} 

.user-filter { 
    @extend .span2; 
} 

.user-list { 
    @extend .span10; 
} 

내가 생성 된 코드를 보면,이 모든 것이 확인을해야 나에게 보인다

/* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */ 
.span2, .user-filter { 
    width: 140px; 
} 

등등.

내가 뭘 잘못하고 있니?

UPDATE :

확인, 단지 무엇이 잘못되었는지를 명확하게하기 - 열이 (하나 서로 옆에) 오히려 진정한 열의 같은 행 (차례로)로 배치되어, 예를 들면 :

부트 스트랩과

는 : 열 1 열 2 내 사용자 정의 클래스와
:
첫 번째 열
두 번째 열은

나는 요소가 layo 검사 한 유토피아에서 크롬 및 bootstrap 클래스 float 속성 및 광산 - 아니 보인다. CSS 소스를 보면이 같은 클래스를 참조하십시오

이

[class*="span"] { 
    float: left; 
    margin-left: 20px; 
} 

그래서 내 경우에는 내가 그것을 같은 것을 생성해야한다고 생각 : [클래스 * = "사용자 필터를"] { 플로트 : 왼쪽; margin-left : 20px; }

또는 없습니까?

Answer 1

@extend을 사용하거나 와일드 카드 클래스 매칭을 처리 할 수없는 Sass '무능력입니다. 다소 복잡하기 때문에 다소 놀랄 일이 아닙니다.

부트 스트랩은 일부 클래스를 처리하기 위해 '비표준'메소드로 참조 할 수있는 많은 수를 사용합니다. 위에 게시 된 게시물 중 하나 인 [class*="span"]을 언급하셨습니다.

당연히 @extend x을 사용할 때 Sass는 x 클래스를 확장합니다. 불행하게도, (현재) 와일드 카드 매처가 클래스 출력에 영향을 미치는지 알 수있는 방법이 없습니다. 그래, 이상적인 세계에서 [class*="span"]도 확장되어 [class*="span"], .user-filter으로 정의되지만 Sass는 현재 그렇게 할 수 없습니다.

.row-fluid을 확장하면 그 아래에 중첩 된 규칙을 포함하기에 충분합니다. 위에서와 같이 스팬 클래스는 확장 된 범위에 대해 와일드 카드를 조정하지 않습니다.

bootstrap-sass는 이미 고정 너비 열/행 makeRow() 및 makeColumn()에 대한 믹스 인을 가지고 있습니다. 방금 makeFluidColumn() 믹스 인을 밀어 넣었습니다. 유체 스팬을 만듭니다. 그러면 귀하의 코드는 다음과 같이됩니다 :

.user-container { 
    @extend .row-fluid; 
} 

.user-filter { 
    @include makeFluidColumn(2); 
} 

.user-list { 
    @include makeFluidColumn(10); 
} 

불행히도 (평소와 같이) 매우 간단하지는 않습니다. 부트 스트랩은이 스 니펫을 사용하여 행의 하위 인 첫 번째 spanx 클래스의 여백을 재설정합니다.

> [class*="span"]:first-child { 
    margin-left: 0; 
} 

그러나, 우리는 makeFluidColumn의 각 호출에 대해이 작업을 다시 정의 할 수없고, 그래서 우리는 수동으로 설정해야 더 마진 왼쪽 유체 행의 첫 번째 자식이 될 것입니다 모든 요소에.하지 또한 spanx 클래스와 makeFluidColumn 클래스를 혼합하면 실제로 행의 첫 번째 열에 관계없이 첫 번째 spanx 클래스의 여백이 재설정된다는 점에 유의해야합니다.

코드는 그러므로 그것은 특히 꽤 해결책은 아니지만 작동, 당신은 귀하의 질문 업데이트에 모여으로 부트 스트랩은, 와일드 카드 클래스 매칭을 사용하는 방법을 함께 할 수있는 모든 것입니다

.user-container { 
    @extend .row-fluid; 
} 

.user-filter { 
    @include makeFluidColumn(2); 
    margin-left: 0; // reset margin for first-child 
} 

.user-list { 
    @include makeFluidColumn(10); 
} 

될 것이다. 단지 2.0.2 브랜치로 푸시 했으므로 Git과 함께 Bundler를 설치해야하지만, 앞으로 며칠 안에 릴리스를 기대하고 있습니다.

Answer 2

당신 말이 맞습니다. 트위터가 애니 패터를 밀어 붙이고 있습니다. 이 기사를 참조하십시오. 내가 CSS 클래스 부트 스트랩 .span 클래스처럼 행동하기 위해 부트 스트랩의 유지 mixin에 따라 내 자신의 믹스 인을 만들어야했습니다 boostrap-sass 2.3.2.2 보석을 사용하여

http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

Answer 3

.

// private mixin: add styles for bootstrap's spanX classes 
@mixin _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) { 
    @include input-block-level(); 
    float: left; 
    margin-left: $fluidGridGutterWidth; 
    *margin-left: $fluidGridGutterWidth - (.5/$gridRowWidth * 100px * 1%); 
    @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); 
} 

// thats what you should use 
@mixin makeFluidSpan($gridColumns) { 
    @media (min-width: 980px) and (max-width: 1199px) { 
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); 
    } 
    @media (min-width: 1200px) { 
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200); 
    } 
    @media (min-width: 768px) and (max-width: 979px) { 
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth768, $fluidGridGutterWidth768); 
    } 
    &:first-child { 
    margin-left: 0; 
    } 
    @media (max-width: 767px) { 
    float: none; 
    display: block; 
    width: 100%; 
    margin-left: 0; 
    box-sizing: border-box; 
    margin-bottom: 20px; 
    &:last-child { 
     margin-bottom: 0; 
    } 
    } 
} 

예 :

.like-span3 { // this class acts like .span3 
    @include makeFluidSpan(3); 
    }