4
respostas

Dica para código

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; }

4 respostas

Uma solução é usar sass maps:

$buttons: (
    error: (#c00, #fff),
    success: (#0c0, #333),
    warning: (#fc0, #333)
);

.button {
    display: inline-block;
    background-color: #efefef;
    color: #222;

    @each $name, $colors in $buttons {
        $bg: nth($colors, 1);
        $font: nth($colors, 2);

        &--#{$name} {
            background-color: $bg;
            color: $font;
        }  
    }
}

Huh?! não entendi!?!

Pelo que eu vi o trabalho para escrever os map e o trabalho pra escrever o código original na mão é exatamente o mesmo, então não tô satisfeito com a indicação.