Pré processadores são "linguagens" que simplifica e deixa mais limpo o CSS com funções, variaveis e outros facilitadores que no final, é compilado para CSS puro.

Os mais conhecidos são Stylus, SASS e o LESS.

Por exemplo, você pode criar uma função com o padrão de box-shadow, então quando você for usar ele, pode só chamar a função, com isso, se em um futuro você precisar mudar e deixar esse box-shadow mais claro, basta mudar na função.

Vou deixar um exemplo simples aqui.

Arquivo SASS com variáveis e funções:

$textColor = #333
boxShadow()
    box-shadow: 0 1px 5px #00000010
defaultText()
    line-height: 1.5em
    font-size: 1.6rem

Arquivo SASS com o código "CSS":

.productBox
    width: calc(50% - 10px)
    boxShadow()
    p
        defaultText()
        color: $textColor

Arquivo compilado para CSS puro:

.productBox {
    width: calc(50% - 10px);
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
.productBox p {
    line-height: 1.5em;
    font-size: 1.6rem;
    color: #333;
}

Com isso, você pode reaproveitar de forma muito fácil seus arquivos, lembrando que isso ai é um exemplo simples que não estou usando boas práticas e outras normas, é um exemplo simples para você entender um pouco do que é um pré processador.