Css 添加筛选器而不覆盖以前的筛选器

我的图标上有这个过滤器

.uiicon {
    filter:invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -webkit-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -moz-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -o-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -ms-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    width:64px;
    height:64px;
    display:inline-block;
}

它表现得很好，做它想做的事

但是，当我向一个类添加一个额外的过滤器时，它会完全覆盖上一个过滤器，而不是很好地级联

.icon1 {
    background-image: url('uiicons/%20(1).png');
    -webkit-filter:drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
 }

除了制作一个混合类，还有其他方法吗？我真的不喜欢代码复制的想法

编辑

---

我很想知道是否有一种本土的方式来实现这一点。我对css预处理器或javascript解决方案不感兴趣。我知道怎么做。

你介意用JS吗？CSS预处理呢？我知道如何使用js进行预处理，但我更想知道是否有一种本地方法来实现这一点。我发现，有时某个地方有人有一些模糊的知识，可以提供所需的线索。正如我所说，我很有兴趣找出是否有一种本土的方式。