Question

我有以下代码，结果在编译的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)

Answer 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中的一个位置！

如何使用多个元素干掉SASS过渡？

1 个答案: