2014-02-07 73 views
1

的範圍擴大我有一個SASS文件中像這樣:SASS內的另一個類

.fancy_div { 
    background-color: #CCC; 
    border: 3px solid blue; 
    .pretty_text { 
    font-size: 8px; 
    font-style: italic; 
    } 
} 

然後我還有一個SASS文件,在這裏我想要做類似的事情與pretty_text選擇。

.lame_div { 
    background-color: purple; 
    border: 3px solid green; 
    .ugly_text { 
    @extend .pretty_text; 
    font-color: #ffd700; 
    font-style: bold; 
    } 
} 

我的目標是讓.ugly_text一樣,除了黃金和大膽.pretty_text(顯然這都假,但你明白我的意思)。

當然,如果我改變了最初的範圍,它會工作:

.pretty_text { 
    font-size: 8px; 
    font-style: italic; 
} 
.fancy_div { 
    background-color: #CCC; 
    border: 3px solid blue; 
} 

然而,這不是幾個原因可行的解決方案。

有沒有辦法在另一個範圍內擴展一個類?即使它是hacky。

+0

對於未來的訪問者,瞭解爲什麼第一個示例的輸出不是您想要的內容會很有幫助。 – cimmanon

回答

2

我將假設你不能修改你正在擴展的代碼是因爲它是另一個庫的一部分。但是,答案是否定的。你唯一的選擇是修改原始文件(也許提交一個補丁到你正在使用的項目中)。

%pretty_text { 
    font-size: 8px; 
    font-style: italic; 
} 

.fancy_div { 
    background-color: #CCC; 
    border: 3px solid blue; 
    .pretty_text { 
     @extend %pretty_text; 
    } 
} 

.lame_div { 
    background-color: purple; 
    border: 3px solid green; 
    .ugly_text { 
     @extend %pretty_text; 
     font-color: #ffd700; 
     font-style: bold; 
    } 
}