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.