擴展更少喜歡它Sass can

我喜歡使用:extend() in就像我可以在Sass中做的那樣。擴展更少喜歡它Sass can

實施例中SCSS：小於http://codepen.io/Grawl/pen/qEeQPG

實施例：http://codepen.io/Grawl/pen/qEeQpz（未加工）

預期輸出：

.datalist-item { 
 
    display: block; 
 
} 
 
.datalist-item-term { 
 
    font-weight: normal; 
 
} 
 
.datalist-item-description { 
 
    font-weight: bold; 
 
} 
 
.datalist-float .datalist-item { 
 
    display: inline-block; 
 
} 
 
.datalist-float .datalist-item:not(:last-of-type) { 
 
    margin-right: 1em; 
 
    padding-right: 1em; 
 
    border-right: 1px solid; 
 
}

目的是不是自重複，所以如果我在Sass中重新命名一個類，我不會重命名其他類。

我知道我可以把根類的變量，它http://codepen.io/Grawl/pen/qEeQpz兩次使用它，但它看起來醜陋:(

來源

2015-04-16 Даниил Пронин

SASS似乎只擴展了選擇器（'datalist-item'），但不包括它內部的屬性。目前我認爲這種延伸是不可能的。 – Harry

此外，當前較少不能擴展通過串聯形成的選擇器 - http://stackoverflow.com/questions/24879871/how-do-i-extend-a-class-mixin-which-has-dynamically-formed-selector/26450099# 26450099 – Harry

我看不出爲什麼'extend'在這種用例中被使用。「預期結果」中的任何類中都沒有重複屬性。 [因此不需要'擴展']（https://gist.github.com/seven-phases-max/dbbf6a9ad50a3458c963）。 –

你薩斯（SCSS）示例使用@extend-Only Selectors這是延長一些特殊形式，不存在欠

首先一個「正常」的延伸：

SCSS：

.class { 
p: 1; 
} 
.class2 { 
@extend .class; 
}

和減：

.class { 
p: 1; 
} 
.class2 { 
&:extend(.class); 
}

兩個編譯成：

.class, 
.class2 { 
    p: 1; 
}

在更短的.class2 { &:extend(.class); }也可以寫爲.class2:extend(.class1){}

現在考慮它使用下面的SCSS代碼@延長，只有選擇器：

%class { 
p: 1; 
} 

.class2 { 
@extend %class; 
}

上述代碼如下編譯成CSS代碼：

.class2 { 
    p: 1; }

薩斯文檔告訴你：

@延長，只有選擇器

有時候你會寫，你永遠只能想 @extend一類風格，從不希望直接在你的HTML中使用。當編寫一個Sass庫時，這是尤其如此，您可以在其中爲用戶提供樣式，以便@extend（如果他們需要，並且如果他們不需要則忽略）。

如果爲此使用普通類，則在生成樣式表時最終會創建很多額外的 CSS，並且存在與其他在HTML中使用的類衝突的風險。這就是爲什麼Sass 支持「佔位符選擇器」（例如，％foo）。

佔位符選擇器看起來像class和id選擇器，除＃或。被％替換。它們可以用於任何類或ID可能的地方，和它們自己阻止將規則集呈現爲CSS。

在更短的，你將有兩個選擇，有一些代碼不生成輸出：

1）使用一個mixin，混入不產生產出：

.class() { 
p: 1; 
} 
.class2 { 
.class(); 
}

輸出：

.class2 { 
    p: 1; 
}

2）把你的類不應該輸出在不同的文件中，並用reference將該文件導入kewyword：

file1.less：

.class { 
p: 1; 
}

file2.less：

@import (reference) "file1"; 
.class2 { 
&:extend(.class); 
}

lessc file2.less將輸出現在：

.class2 { 
    p: 1; 
}

，但我和@七階段-MAX在同意首先是評論。在你的例子中，不需要使用擴展。 @ seven-phases-max顯示了一些例子來解決這個用例。或者你可以考慮;改變選擇順序與家長參考，應在兩個Less和上海社會科學院工作：

.datalist-item { 
    display: block; 

    &-term { 
    font-weight: normal; 
    } 

    &-description { 
    font-weight: bold; 
    } 

    .datalist-float & { 
    display: inline-block; 

     &:not(:last-of-type) { 
     margin-right: 1em; 
     padding-right: 1em; 
     border-right: 1px solid; 
     } 

    } 

}

編譯成：

.datalist-item { 
    display: block; 
} 
.datalist-item-term { 
    font-weight: normal; 
} 
.datalist-item-description { 
    font-weight: bold; 
} 
.datalist-float .datalist-item { 
    display: inline-block; 
} 
.datalist-float .datalist-item:not(:last-of-type) { 
    margin-right: 1em; 
    padding-right: 1em; 
    border-right: 1px solid; 
}

最後發現你正在使用如屬性的嵌套：

border: { 
    right: 1px solid; 
};

應該編譯成：

border-right { 
1px solid; 
}

較少不支持嵌套屬性。

來源

2015-04-16 21:07:20

很好的解釋。代碼格式有點失序的任何具體原因？ – Harry

對不起，但我已經知道這一切。我想「擴展」佔位符的主要原因是不要在選擇器名稱中重複。幹。 –

在你的例子中，你可以使用雙引用'＆-float＆'，參見：http://codepen.io/anon/pen/gpPaGK –

擴展更少喜歡它Sass can

回答

相關問題