如何在不包含所有CSS但只包含@extends的情況下執行@import

Question

我正在使用手寫筆與bootstrap-stylus。這是我app.styl代碼

@import "../../node_modules/bootstrap-stylus/lib/bootstrap.styl"; 
section 
    @extend .row 

我運行一飲而盡後，我注意到，完成引導CSS是包括到目標app.css。我想使用@extend動態地包含.row rule。我試圖得到的是這個..

section { //.row rules 
    zoom: 1; 
    margin-left: -20px; 
} 

這可能嗎？我錯過了什麼？ SASS有可能嗎？

Answer 1

AFAIK手寫筆和sass不支持僅導入文件的某些選擇器。但是，如果您可以控制導入的文件，則可以使用SASS placeholder selectors而不是類/ ids。佔位符選擇器是某種抽象選擇器，它根本不會默認呈現任何內容。

/* _partial.scss */ 
%some-selector { 
    prop: value; 
} 
%another-selector { 
    prop: value; 
} 

/* main.scss */ 
@import 'partial'; 
.some-class { 
    @extend %some-selector; 
} 

導致不擴展佔位選擇被忽略（在這種情況下%another-selector）

/* output.css */ 
.some-class { 
    prop: value; 
}