레일즈 + 부트 스트랩 - 믹스 mix

Question

아마 mixin을 sass와 함께 사용하는 방법이나 bootstrap-sass (https://github.com/thomas-mcdonald/bootstrap-sass)로 작업하는 방법을 이해하지 못할 수도 있습니다. . 하지만 입력란 클래스에서 상자 그림자를 변경하는 것과 같은 작업을 수행하려면 어떻게해야합니까?

편집 :이 예제에서는 선택하면 활성 입력란에서 광선 효과를 변경하려고합니다. 기본적으로 파란색입니다. 내 프로젝트 설정을위한

, 나는 그것이 GitHub의 페이지에 말한다처럼 그것을 가지고하고 Gemfile에 보석이 다음 컨트롤러에서 내가 좋아하는 뭔가가 : 그래서 어쩌면

@import "bootstrap" 
.testInput { 
    /*(here I have put a variation of variables that I change to see 
    if I can do something with the mixin like $bordercolor: #000;*/ 
    @include formFieldState() 
} 

방법에 대한 이해를 축축한 작품은 벗어났다. 입력에 대한 박스 - 섀도우를 변경하고 싶다면 내 믹스 인에서 코드를 반복 할 수있을뿐 아니라 다른 믹스에서도 이런 종류의 것이 가능했는지에 대한 일반적인 질문이었습니다.

Answer 1

믹스 인 formFieldState의 소스를 확인해 보셨습니까? 여기에 살고 있습니다 : https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss#L159. 이 믹스 인은 어떤 유형의 컨테이너에서 사용되도록 설계되었으며, 대부분 form입니다.

기본값 인 input:focus 박스 섀도우를 제어하는 ​​변수는 없습니다 (해당 선언은 https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_forms.scss#L126입니다). 구식 방식으로 오버라이드해야합니다.

Answer 2

이전에 대신 @include 뒤에 변경하려는 내용을 넣어야합니다. 마지막 선언은 CSS와 함께이기므로 믹스 인 앞에 넣으면 믹스 버전이 이깁니다.

CSS 우선 순위에 대한 고급 토론은 http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/을 참조하십시오.