스타일러스에서 부분 가져 오기 방법

Question

스타일러스에서 부분 가져 오기 (확장, 포함, 상속)를 구현하는 방법은 무엇입니까?
예를 들어 나는 두 개의 파일이 있습니다

• foo.styl body {color:orange} a {color: blue}

• bar.styl을

  파일 bar.styl 내가 foo.styl에서 body {color:orange}을 배치 싶지만 a {color: blue}
  을 원하지 않는 내

어떻게 구현할 수 있습니까?

Answer 1

(아직) Stylus에는 아무 것도 없습니다. 그것은이 트릭을 사용하여 가능 수 : https://github.com/LearnBoost/stylus/issues/1687 - 제대로 렌더링에서 이것을 방지 :

$foo 
    @import 'test2' 

body 
    @extends $foo body 

그러나 스타일러스 버그가 있었다. 이 버그는 Stylus 0.49.0에서 수정되었으므로이 버전 또는 그 이후 버전을 사용하는 경우 모든 것이 잘됩니다.

@extends을 사용하려고했던 선택기가 중첩 된 선택기와 일치 할 때만 문제가 발생했기 때문에 Stylus를 약간 속여 선택기가 동일하지 않다고 생각할 수 있습니다. 가장 간단하고 쉬운 방법은이 방법으로 작성하는 것입니다 :

$foo 
    @import 'test2' 

* > body 
    @extends $foo body 

이 스타일러스가 동일한로 그 선택기 생각하지 만들 것 및 것 출력 * > body 제대로. 별 선택기는 종종 해를 끼치지만 그 경우에는 왼쪽에 배치되고 자식 연결자가 있으므로 선택기 일치가 발생해도 성능 문제가 발생하지 않으며 별 선택기에 특이성이 있다면, 그것은 주어진 규칙의 특이성을 방해하지 않을 것이다.

그러나 약간 기다릴 수 있으면 Stylus에서이 버그를 해결할 수 있으므로 다음 릴리스 중 하나에서이 대답의 시작 부분에서 수정 코드를 사용할 수 있습니다.