sass, less e stylus são pré-processadores css. pré-processadores são ferramentas que extendem as funcionalidades padrão do css, fazendo com que desenvolvedores consigam usar variáveis, funções e muito mais. isso facilita muito em projetos grandes que reutilizam muitos elementos e ajuda na manutenção de código.

atualmente, navegadores só entendem o css vanilla. ou seja, precia-se compilar seu código css em algo legível pelos navegadores antes de colocar seu projeto no ar.

abaixo listo algumas das funcionalidades mais usadas, e mais relevantes para iniciantes:

variáveis

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

nesting

.floresta {
  .patinho {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .passarinho {
    display: inline-block; 
  }

  .raposa {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

.floresta .patinho {
  margin: 0;
  padding: 0;
  list-style: none;
}
.floresta .passarinho {
  display: inline-block;
}
.floresta .raposa {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

operadores

@use "sass:math";

.campo {
  display: flex;
}

.patinho {
  width: math.div(600px, 960px) * 100%;
}

.cachorrinho {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

.campo {
  display: flex;
}

.patinho {
  width: 62.5%;
}

.cachorrinho {
  width: 31.25%;
  margin-left: auto;
}

próxima dúvida →

o que é box-sizing?