As 40 principais perguntas e respostas da entrevista SASS (2025)

Aqui estão as perguntas e respostas das entrevistas SASS e SCSS para calouros e também para candidatos experientes para conseguir o emprego dos sonhos.

1) Explique o que é Sass? Como pode ser usado?

Sass significa Folhas de Estilo Sintaticamente Impressionantes e foi criado por Hampton Catlin. É uma extensão do CSS3, adicionando regras aninhadas, mixins, variáveis, herança de seletores, etc.

Sass pode ser usado de três maneiras

Como uma ferramenta de linha de comando
Como um módulo Ruby independente
Como um plugin para qualquer estrutura habilitada para Rack

Download gratuito de PDF: Perguntas e respostas da entrevista SASS

2) Liste os principais recursos do Sass?

Os principais recursos do Sass incluem

Totalmente compatível com CSS3
Extensões de linguagem, como aninhamento, variáveis e mixins
Muitas funções úteis para manipular cores e outros valores
Recursos avançados como diretivas de controle para bibliotecas
Saída bem formatada e personalizável

3) Liste os tipos de dados que o SassScript suporta?

SassScript suporta sete tipos de dados principais

Números (por exemplo; 1,5, 10px)
Sequências de textos ( ex., “foo”, 'bar', etc.)
Cores (azul, #04a3f9)
Booleanos (verdadeiro ou falso)
Nulos (por exemplo; nulo)
Lista de valores, separados por espaço ou vírgula (por exemplo, 1.5em, Arial, Helvetica etc.)
Mapeia de um valor para outro (por exemplo, (chave 1: valor1, chave 2: valor 2))

4) Explique como definir uma variável no Sass?

Variáveis no Sass começam com um sinal ($) e a atribuição de variáveis é feita com dois pontos (:).

5) Explique qual é a diferença entre Sass e SCSS?

A diferença entre Sass e SCSS é que,

Sass é um APF pré-processador com avanços de sintaxe e uma extensão de CSS3
Sass tem duas sintaxes
A primeira sintaxe é “SCSS” e usa a extensão .scss
A outra sintaxe é a sintaxe recuada ou apenas “Sass” e usa a extensão .sass
Embora o Sass tenha uma sintaxe flexível com espaços em branco e sem ponto e vírgula, o SCSS se assemelha mais ao CSS

Qualquer documento CSS válido pode ser convertido para Sass simplesmente alterando a extensão de.CSS para.SCSS.

6) Para que é usado o aninhamento de seletores no Sass?

No Sass, o aninhamento de seletores oferece uma maneira para os autores de folhas de estilo calcularem seletores longos, aninhando seletores mais curtos uns dentro dos outros.

7) Explique para que serve uma função @extend no Sass?

No Sass, a diretiva @EXTEND fornece uma maneira simples de permitir que um seletor herde os estilos de outro. O objetivo é fornecer uma maneira para um seletor A estender os estilos de um seletor B. Ao fazer isso, o seletor A será adicionado ao seletor B para que ambos compartilhem as mesmas declarações. @EXTEND evita o inchaço do código agrupando seletores que compartilham o mesmo estilo em uma regra.

8) Explique qual é a utilização da função @IMPORT no Sass?

A função @IMPORT no Sass

Estende a regra de importação de CSS permitindo a importação de arquivos SCSS e Sass
Todos os arquivos importados são mesclados em um único arquivo CSS de saída
Pode misturar e combinar virtualmente qualquer arquivo e ter certeza de todos os seus estilos
@IMPORT leva um nome de arquivo para importar

9) Por que Sass é considerado melhor que LESS?

Saas permite que você escreva métodos reutilizáveis e use instruções lógicas, por exemplo, loops e condicionais
O usuário Saas pode acessar a biblioteca Compass e usar alguns recursos incríveis, como geração dinâmica de mapas de sprites, hacks de navegador legado e suporte entre navegadores para recursos CSS3
O Compass também permite adicionar uma estrutura externa como Blueprint, Foundation ou Bootstrap em cima
No LESS, você pode escrever uma instrução lógica básica usando um 'mixin protegido', que é equivalente às instruções Sass if
No LESS, você pode percorrer valores numéricos usando funções recursivas, enquanto o Sass permite iterar qualquer tipo de dados
No Sass, você pode escrever suas próprias funções úteis

10) Explique qual é o uso da função Mixin no Sass? Qual é o significado de SECAR um mixin?

Mixin permite definir estilos que podem ser reutilizados em toda a folha de estilo sem a necessidade de recorrer a classes não semânticas como .float-left.

SECAR uma mixagem significa dividi-la em partes dinâmicas e estáticas. O mixin dinâmico é aquele que o usuário realmente chamará, e o mixin estático são as informações que, de outra forma, seriam duplicadas.

11) Explique o que é Sass Maps e para que serve o Sass Maps?

O mapa Sass são dados estruturados de forma hierárquica e não apenas um monte de variáveis. Pode ajudar na organização do código. Alguns ótimos usos do Sass são

É muito útil ao lidar com camadas de elementos no seu projeto
Pode ser útil no gerenciamento de cores quando há uma longa lista de cores e tonalidades diferentes
Use o mapa de ícones para vários ícones de mídia social, por exemplo: facebook: '\e607' ou twitter: '\e602'
Ao contrário de outras bibliotecas de programação, o mapa Sass consistirá apenas no código que será usado

12) Explique como os comentários Sass são diferentes do CSS normal?

A sintaxe para comentários em CSS regular começa com /* comments…*/, enquanto no SASS existem dois tipos de comentários, os comentários de linha única // e os comentários CSS multilinha com /* */.

13) O Sass suporta comentários in-line?

Comentários de linha única // serão removidos pelo pré-processador .scss e não aparecerão no seu arquivo .css

Embora o comentário */ seja CSS válido e será preservado entre a tradução de .scss para seu arquivo .css

14) Como a interpolação é usada no Sass?

No Sass, você pode definir um elemento em uma variável e interpolá-lo dentro do código Sass. É útil quando você mantém seus módulos em arquivos separados.

15) Explique quando você pode usar %placeholders no Sass?

%placeholders no Sass é útil quando você deseja escrever estilos que deveriam ser estendidos, mas não deseja que os estilos base sejam vistos nos estilos CSS de saída

16) É possível aninhar variáveis dentro de variáveis no Sass?

A interpolação de nomes de variáveis não é possível atualmente no Sass. No entanto, você pode usar interpolação de espaços reservados.

17) Quais são os contras e prós do Sass?

Vantagens:

Sass é fácil de aprender, especialmente para quem tem experiência em Python, Ruby ou Coffescript e usa funções, escreve mixins
CSS pode ser facilmente convertido para Sass
Ao longo do projeto, você não precisa repetir instruções CSS semelhantes usando o atributo @extend
Permite definir variáveis que podem ser utilizadas ao longo de todo o projeto
Mantém seu projeto responsivo mais organizado

Desvantagens:

Requer tempo para aprender novos recursos do pré-processador antes de usar
Talvez você não consiga usar o recurso integrado do inspetor de elementos do navegador
A solução de problemas pode ser difícil

18) Explique o que é MENOS?

LESS é uma linguagem de produção de folhas de estilo dinâmicas. LESS é um pré-processador CSS e estende CSS com comportamento dinâmico. Permite variáveis, mixins, operações e funções. LESS é executado no lado do servidor e no lado do cliente.

19) Explique como criar um arquivo LESS e onde armazená-lo e compilá-lo?

Criar ou armazenar um arquivo LESS é semelhante a criar/armazenar um arquivo CSS. Um novo arquivo LESS pode ser criado com uma extensão .less ou você pode renomear o arquivo .css existente para um arquivo .less. Você pode escrever código MENOS com código CSS existente.

A melhor maneira de criá-lo dentro da pasta ~/content/ ou ~/Styles/

20) De que forma o LESS pode ser usado?

Via npm LESS pode ser usado na linha de comando
Baixe como um arquivo de script para o navegador
Para ferramentas de terceiros, é usado

21) Como a variável é representada em LESS?

LESS permite que variáveis sejam definidas. Em LESS, a variável é representada como @sing. Enquanto, a atribuição de variável é feita com: (dois pontos) sing. Os valores das variáveis são inseridos no arquivo de saída CSS, bem como no arquivo reduzido.

22) Explique como o Mixins é útil?

Os mixins permitem incorporar todas as propriedades de uma classe em outra classe, incluindo o nome da classe como uma de suas propriedades. É como variáveis, mas para classes inteiras.

23) Explique como definir o código em modo de observação ao executar LESS.js em um HTML5 navegador?

Se você executar LESS.js em um navegador HTML5, ele usará armazenamento local para armazenar em cache o CSS gerado. No entanto, do ponto de vista do desenvolvedor, eles não podem ver as alterações feitas instantaneamente. Para ver suas alterações instantaneamente, você pode carregar o programa em desenvolvimento e modo de observação seguindo JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Explique qual é o significado de aninhamento na programação LESS?

Aninhar em LESS é agrupar instruções dentro de outras instruções, formando um grupo de códigos relacionados. Em outras palavras, quando adicionamos um trecho de código e outro código dentro dele, esse trecho de código é chamado de aninhamento.

25) Mencione quais são as funções do canal de cores usadas no LESS?

matiz
saturação
hsvhue
saturação
hswalue
vermelho
verde
azul
alfa
luma
luminância

26) Explique o que é data-uri no LESS?

Em CSS, URIs de dados são uma das melhores técnicas, pois permitem aos desenvolvedores evitar referências externas a imagens e, em vez disso, incorporá-las diretamente em uma folha de estilo. URIs de dados são a excelente maneira de reduzir solicitações HTTP

27) Explique o que é “Mapa Fonte Menos Inline”?

A opção “Mapa de origem menos inline” indica que devemos incluir todos os arquivos CSS no mapa de origem. O que significa que você só precisa do arquivo de mapa para chegar à fonte original.

28) Explique qual é a utilidade de Extend “all” em LESS?

Quando você especifica todas as palavras-chave por último em um argumento de extensão, ele diz ao LESS para corresponder a esse seletor como parte de outro seletor.

29) Explique o que é “StrictImports” no LESS?

O strictImports controla se o compilador permitirá um @import dentro de blocos @media ou outros blocos seletores

30) Liste as diferenças entre LESS e Sass?

Cada linguagem de folha de estilo é boa em sua perspectiva e uso; no entanto, existem poucas diferenças em seu uso.

MENOS	Sass
– LESS usa JavaScript e é processado no lado do cliente	– Sass é codificado em Ruby e, portanto, processado no lado do servidor
– Os nomes das variáveis são precedidos pelo @symbol	– O nome da variável é precedido pelo símbolo $
– LESS não herda múltiplos seletores com um conjunto de propriedades	– Sass herda múltiplos seletores com um conjunto de propriedades
– LESS não funciona com unidades “desconhecidas” nem retorna notificação de erro de sintaxe para unidades incompatíveis ou erro de sintaxe relacionado à matemática	– Sass permite trabalhar com unidades “desconhecidas” e também retorna uma notificação de erro de sintaxe para unidades incompatíveis

31) Quais são as semelhanças entre LESS e Sass?

Entre LESS e Sass as semelhanças são

Namespaces
Funções de cor
Mixins e mixins paramétricos
Capacidades de aninhamento
Avaliações de JavaScript

32) Explique qual é a utilidade de &combinator ?

&combinator concatena o seletor aninhado com o seletor pai. É útil para pseudoclasses como :hover e :focus

33) Explique qual é a utilidade das operações em LESS?

As operações podem ser usadas para executar funções como

Operadores matemáticos simples: +, –, *, /
Funções de cor
Funções matemáticas
Qualquer variável de tamanho ou cor pode ser operada

34) Explique qual é a utilidade de Escape?

O uso de escape em LESS

Quando você precisa gerar CSS que não é uma sintaxe CSS válida
Sintaxe proprietária não reconhecida pelo LESS
O compilador LESS gerará um erro se não for usado
Prefixo simples com símbolo ~ e colocado entre aspas

35) O que contém os elementos LESS?

Menos elementos contêm mixins comumente usados, como

.gradiente
.arredondado
.opacidade
.Sombra da caixa
.sombra interior

36) Liste alternativas contra LESS?

SASS: folhas de estilo sintaticamente impressionantes
SCSS: Versão.2 do SASS
Estilete

37) Explique como você pode invocar o compilador a partir da linha de comando?

Você pode invocar o compilador a partir da linha de comando em LESS como

$ menos estilos.menos

Isso produzirá o CSS compilado para saída padrão; você pode então redirecioná-lo para um arquivo de sua escolha

$ lessc estilos.less > estilos.css

38) Qual é a utilidade da função e()?

Com a ajuda da função e() você pode escapar de um valor para que ele passe direto para o CSS compilado, sem ser notado pelo compilador LESS.

39) Explique como você pode pré-compilar LESS em CSS?

Para pré-compilar LESS em CSS você pode usar

Execute less.js usando Node.js: usando a estrutura JavaScript Node.js, você pode executar o script less.js fora do navegador
Use lessphp: Para a implementação do compilador LESS escrito em PHP, lessphp é usado
Use o compilador online: use o compilador online para compilação rápida de código MENOS sem instalar um compilador
Menos. app (para usuários de Mac): Less.app é uma ferramenta gratuita para usuários de Mac, esta ferramenta os compila automaticamente em arquivos CSS

40) Explique como a função de mesclagem é usada no LESS?

Para agregar valores de várias propriedades em uma lista separada por espaço ou vírgula em uma única propriedade, LESS é usado. É útil para propriedades como transformação e plano de fundo

41) Como você pode criar estruturas de loop em LESS?

Um mixin pode chamar a si mesmo em MENOS. Esses mixins recursivos, quando combinados com correspondência de padrões e expressões de proteção, podem ser usados para criar várias estruturas iterativas/loop.

42) Por que precisamos de mixins paramétricos no LESS?

Os mixins paramétricos são iguais aos mixins padrão. A única diferença é que os mixins paramétricos aceitam parâmetros como funções em JavaScript. Depois de determinar os parâmetros dos mixins, você obtém mais controle sobre os mixins.