我有以下代码,结果在编译的CSS中生成了很多转换语句。我想知道如何更好地改进代码结构来处理页面中的多个转换。
.container
+outer-container
max-width: $desktop-breakpoint
margin: 0 auto
position: relative
padding-top: 1.8em
padding-bottom: 1.8em
+background(url('images/button-action.svg') right 10% center no-repeat)
+transition($quick-ease)
&:hover
+background(url('images/button-action.svg') right 8% center no-repeat)
padding-top: 2em
padding-bottom: 2em
h3, p.subtitle
margin-left: 5%
+transition($quick-ease)
+transition($quick-ease)
h3
color: #FFFFFF
margin: 0
+transition($quick-ease)
p.subtitle
color: rgba(255,255,255,0.75)
letter-spacing: 1.8px
margin: 0
+transition($quick-ease)
答案 0 :(得分:1)
如果您在多个元素上使用相同的css块,则可以使用SASS的@extend
方法。
它将做的是将多个选择器组合到一个类中。
<强>即:强>
.animation{
+transition($quick-ease);
}
h3{
@extend .animation;
/* Other CSS */
}
p.subtitle{
@extend .animation;
/* Other CSS */
}
<强>输出:强>
.animation, h3, p.subtitle { /* animation css */ }
h3{ /* Other CSS */ }
p.subtitle{ /* Other CSS */ }
这样,过渡css不会在多个选择器中反复添加,而只是在生成SASS Cheers中的一个位置!