我目前正在使用一个使用SASS的团队.我看到我们扩展的样式很简单,对我来说,我看不到这样做的好处.我错过了什么吗？
以下是导入并在其他sass文件中使用的_Common.scss的一些示例：
- .visibility-hidden{visibility: hidden;}
- .display-inline { display: inline; }
- .display-inline-block { display: inline-block; }
- .display-block { display: block; }
- .display-none { display: none; }
- .display-Box { display: Box; }
- .float-left { float: left; }
- .float-right { float: right; }
- .clear-both { clear: both; }
- .width-percent-100 { width: 100%; }
- .width-percent-65 { width: 65%; }
- .width-percent-50 { width: 50%; }
- .width-percent-45 { width: 45%; }
- .width-percent-40 { width: 40%; }
- .width-percent-33 { width: 33%; }
- .width-percent-30 { width: 30%; }
- .width-percent-20 { width: 20%; }
- .height-percent-100 { height: 100%; }
- .cursor-pointer { cursor: pointer; }
- .underline { text-decoration: underline; }
- .text-decoration-none { text-decoration: none; }
- .bold { font-weight: bold; }
- .font-weight-normal { font-weight: normal; }
- .text-align-center { text-align: center; }
- .text-align-left { text-align: left; }
- .text-align-right { text-align: right; }
- .font-10 { font-size: 10px; }
- .font-11 { font-size: 11px; }
- .font-12 { font-size: 12px; }
- .font-13 { font-size: 13px; }
- .font-14 { font-size: 14px; }
- .font-15 { font-size: 15px; }
- .font-16 { font-size: 16px; }
- .font-17 { font-size: 17px; }
- .font-18 { font-size: 18px; }
- .font-percent-65 { font-size: 65%; }
- .font-percent-80 { font-size: 80%; }
- .font-percent-90 { font-size: 90%; }
- .font-percent-100 { font-size: 100%; }
- .font-percent-110 { font-size: 110%; }
- .font-percent-120 { font-size: 120%; }
- .font-percent-130 { font-size: 130%; }
- .font-percent-140 { font-size: 140%; }
- .font-percent-150 { font-size: 150%; }
- .font-percent-160 { font-size: 160%; }
- .font-percent-170 { font-size: 170%; }
- .font-percent-180 { font-size: 180%; }
例：
- #CategoriesContainer
- {
- ul{
- li{
- &:first-child{
- @extend .font-11;
- }
- a
- {
- @extend .font-11;
- @extend .text-decoration-none;
- }
- }
- }
- }
解决方法
只有当您具有将被多次使用的特定属性集时,才应使用扩展.用一个具有单位值的属性的类扩展类的纯粹愚蠢是不可理解的.
在reference guide中可以找到一个更好的扩展原因的例子
说我们有2个班
- .error {
- border: 1px #f00;
- background-color: #fdd;
- }
- .serIoUsError {
- border-width: 3px;
- }
创建了.serIoUsError来增加行,唯一的问题是现在我们必须使用html中的这两个类来组合样式.
因为我们很懒惰,只想使用一个类,而不是将来可能会更改的重复代码,我们可以用.error来扩展.serIoUsError
- .serIoUsError {
- @extend .error;
- border-width: 3px;
- }
现在我们没有在我们的sass文件中复制代码,但在页面上获得了正确的样式.
查看参考指南了解更多/更好的例子.
只是为了小猫停止扩展类与一个属性类.并且不要隐式地声明选择器中的值/属性,这不是非常语义.
你和你的团队应该是read this post,它解释了你在这里采取的aproach与语义代码的一些问题.找不到一个更好的调整发布这个快速.
