Estou trabalhando em um projetinho free lancer para um cliente e estou reaproveitando um antigo projeto que fiz só que fazendo em SASS, chegou em uma parte do código que ficou trabalhaso e repetitivo e gostaria de saber qual é a melhor maneira(se existir) de automatizar esse código para evitar repetição. segue o tal código fonte:
.classe1 { top: 50%; left: 60%; -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25); }
.classe2 { top: 70%; left: 20%; -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25); transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25); opacity: .3; }
.classe3 { top: 45%; left: 25%; -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25); transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25); opacity: .6; }
.classe4 { top: 55%; left: 35%; -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25); transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25); opacity: .6; }
.classe5 { top: 30%; left: 65%; -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25); transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25); opacity: .6; }
.classe6 { top: 15%; left: 60%; -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25); }
.classe7 { top: 30%; left: 35%; -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25); opacity: .8; }
.classe8 { top: 40%; left: 40%; -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25); transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25); opacity: .8; }
.classe9{ top: 70%; left: 65%; -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25); opacity: .6; }
.classe10 { top: 75%; left: 35%; -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25); transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25); opacity: .3; }
.classe11 { top: 40%; left: 60%; -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25); transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25); opacity: .6; }