Olá a todos, bem-vindos a este curso de front-end. Eu sou o front-end Lao Zhao. O curso de hoje explicará o conceito e o uso de pré-processadores CSS, esperando ajudá-lo a melhorar o desenvolvimento do front-end.
O que é um pré-processador CSS?
Um pré-processador CSS é uma ferramenta que converte uma linguagem semelhante a CSS em CSS. Eles fornecem muitas funcionalidades extras, como variáveis, aninhamento, mixins, funções e muito mais. Essas funções podem tornar o código CSS mais fácil de manter e gerenciar, além de melhorar a eficiência do desenvolvimento.
Existem vários pré-processadores CSS, como Sass, Less, Stylus, PostCSS e assim por diante. Em projetos reais, podemos escolher o pré-processador CSS adequado de acordo com nossas necessidades.
Neste curso, vamos nos concentrar em dois pré-processadores CSS convencionais: Sass e Less. Eles são usados de forma semelhante, e tomamos o Sass como exemplo para explicar.
Primeiro, precisamos instalar o Sass. Sass pode ser instalado usando npm. Você pode instalá-lo digitando o seguinte comando em uma janela de terminal:
bash
npm install -g sassApós a conclusão da instalação, podemos usar o Sass no projeto. Podemos escrever um arquivo .scss usando Sass e depois compilá-lo em um arquivo CSS. O processo de compilação pode ser feito usando a linha de comando ou usando ferramentas automatizadas. Aqui usamos a linha de comando para compilar. Você pode compilá-lo digitando o seguinte comando em uma janela de terminal:
bash
sass input.scss output.cssEntre eles, input.scss é o arquivo Sass que escrevemos e output.css é o arquivo CSS gerado após a compilação.
Em seguida, vamos ver um exemplo de código que demonstra como usar Sass para definir variáveis e regras aninhadas.
Sass (S