로컬/개인용 믹스 믹스를 만들 수 있습니까?

Question

나는 3 개 말대꾸 파일이 :

@mixin font($size, $color){ 
    font-size: #{$size}; 
    color: #{$color} 
    } 

p{ 
    @include font(10px, blue) 
    } 

b.scss :

@mixin font() 
{ 
.. 
} 

c.scss

a.scss는 b.scss는

a.scss을 c.scss

@import a.scss 
@import b.scss 

b.scss의 mixin font()가 a.scss의 mixin 글꼴 ($ size, $ color)보다 우선합니다.

p{ 
    @include font(10px, blue) // use mixin font() in b.scss, error 
    } 

로컬/개인용 믹스 믹스를 만들 수 있습니까? 또는 모든 믹스 인은 웅대한데, 각 믹스 인에 대해 고유 한 이름을 지정해야합니까?

Answer 1

당신 말이 맞습니다. 일반적인 CSS 파일에서와 마찬가지로, 귀하의 새스 프로젝트는 위에서 아래로 컴파일됩니다. 따라서 믹스 인이 이전 이름과 같은 이름을 공유하면 그것을 덮어 씁니다. c.scss에서 원래의 믹스 인을 사용하고 싶다면 다시 정의해야합니다.

Answer 2

선택자 내의 믹스는 Sass 변수와 마찬가지로 해당 선택자에 대해 로컬입니다. 이 두이나 mixin은 서로 독립적입니다 :

그래서

.foo{ 
    @mixin my_color(){ 
     color: #ffcc00; 
    } 
    @include my_color; 
} 

.bar{ 
    @mixin my_color(){ 
     color: #00ffcc; 
    } 
    @include my_color; 
} 

, 당신의 마지막 질문에 대답 - 글로벌 수준에서 정의 만 유지 mixin은 글로벌하고, 그렇지 않으면 안전하게 이름을 다시 사용할 수 있습니다. 귀하의 예제에서 a.scss, b.scss 및 c.scss가 서로 다른 중요한 클래스 (예 : .header, .main, .footer)를 정의하도록 구성되어 있다면 각각에 대해 로컬 글꼴 혼합을 사용할 수 있습니다.

관련 항목 : Localizing/Scoping a sass mixin.