Top 40 des questions et réponses d'entretien SASS (2025)

Voici les questions et réponses des entretiens SASS et SCSS pour les candidats débutants et expérimentés pour obtenir l'emploi de leurs rêves.

1) Expliquez qu'est-ce que Sass ? Comment peut-il être utilisé ?

Sass signifie Syntacically Awesome Stylesheets et a été créé par Hampton Catlin. C'est une extension de CSS3, ajoutant des règles imbriquées, des mixins, des variables, un héritage de sélecteur, etc.

Sass peut être utilisé de trois manières

En tant qu'outil de ligne de commande
En tant que module Ruby autonome
En tant que plugin pour n'importe quel framework compatible Rack

Téléchargement gratuit du PDF : Questions et réponses d'entretien SASS

2) Énumérez les fonctionnalités clés de Sass ?

Les fonctionnalités clés de Sass incluent

Compatible entièrement avec CSS3
Extensions de langage telles que l'imbrication, les variables et les mixins
De nombreuses fonctions utiles pour manipuler les couleurs et autres valeurs
Fonctionnalités avancées telles que les directives de contrôle pour les bibliothèques
Sortie bien formatée et personnalisable

3) Répertoriez les types de données pris en charge par SassScript ?

SassScript prend en charge sept types de données principaux

Nombres (par exemple ; 1,5, 10 px)
Chaînes de textes ( g., « foo », « bar », etc.)
Couleurs (bleu, #04a3f9)
Booléens (vrai ou faux)
Nulls (par exemple, null)
Liste de valeurs, séparées par des espaces ou des virgules (ex., 1.5em, Arial, Helvetica etc.)
Mappe d'une valeur à une autre (g., ( clé 1 : valeur 1, clé 2 : valeur 2))

4) Expliquez comment définir une variable dans Sass ?

Les variables dans Sass commencent par un signe ($) et l'affectation des variables se fait avec deux-points (:).

5) Expliquez quelle est la différence entre Sass et SCSS ?

La différence entre Sass et SCSS est que,

Sass est un CSS préprocesseur avec des avancées de syntaxe et une extension de CSS3
Sass a deux syntaxes
La première syntaxe est « SCSS » et elle utilise l'extension .scss
L'autre syntaxe est la syntaxe indentée ou simplement « Sass » et elle utilise l'extension .sass.
Bien que Sass ait une syntaxe lâche avec des espaces blancs et aucun point-virgule, le SCSS ressemble davantage au CSS.

Tout document CSS valide peut être converti en Sass en changeant simplement l'extension de .CSS en .SCSS.

6) À quoi sert l'imbrication du sélecteur dans Sass ?

Dans Sass, l'imbrication des sélecteurs offre aux auteurs de feuilles de style un moyen de calculer des sélecteurs longs en imbriquant des sélecteurs plus courts les uns dans les autres.

7) Expliquez à quoi sert une fonction @extend dans Sass ?

Dans Sass, la directive @EXTEND fournit un moyen simple de permettre à un sélecteur d'hériter des styles d'un autre. Il vise à fournir un moyen pour un sélecteur A d'étendre les styles d'un sélecteur B. Ce faisant, le sélecteur A sera ajouté au sélecteur B afin qu'ils partagent tous les deux les mêmes déclarations. @EXTEND empêche la surcharge du code en regroupant les sélecteurs qui partagent le même style en une seule règle.

8) Expliquez à quoi sert la fonction @IMPORT dans Sass ?

La fonction @IMPORT dans Sass

Étend la règle d'importation CSS en permettant l'importation de fichiers SCSS et Sass
Tous les fichiers importés sont fusionnés en un seul fichier CSS généré
Peut pratiquement mélanger et assortir n'importe quel fichier et être certain de tous vos styles
@IMPORT prend un nom de fichier à importer

9) Pourquoi Sass est considéré comme meilleur que LESS ?

Saas vous permet d'écrire des méthodes réutilisables et d'utiliser des instructions logiques, par exemple des boucles et des conditions.
L'utilisateur Saas peut accéder à la bibliothèque Compass et utiliser des fonctionnalités impressionnantes telles que la génération dynamique de cartes de sprites, les hacks de navigateurs existants et la prise en charge entre navigateurs pour les fonctionnalités CSS3.
Compass vous permet également d'ajouter un framework externe comme Blueprint, Foundation ou Bootstrap en haut
Dans LESS, vous pouvez écrire une instruction logique de base en utilisant un « mixin protégé », qui est équivalent aux instructions Sass if.
Dans LESS, vous pouvez parcourir des valeurs numériques à l'aide de fonctions récursives tandis que Sass vous permet de parcourir tout type de données.
Dans Sass, vous pouvez écrire vos propres fonctions pratiques

10) Expliquez à quoi sert la fonction Mixin dans Sass ? Quelle est la signification de SÉCHER un mixin ?

Mixin vous permet de définir des styles qui peuvent être réutilisés dans toute la feuille de style sans avoir besoin de recourir à des classes non sémantiques comme .float-left.

SÉCHER un mixage signifie le diviser en parties dynamiques et statiques. Le mixin dynamique est celui que l'utilisateur va réellement appeler, et le mixin statique correspond aux informations qui autrement seraient dupliquées.

11) Expliquez ce qu'est Sass Maps et à quoi sert Sass Maps ?

La carte Sass est une donnée structurée de manière hiérarchique et pas seulement un ensemble de variables. Cela peut aider à organiser le code. Une grande utilisation de Sass est

C'est très utile lorsque vous traitez des couches d'éléments dans votre projet
Cela peut être utile dans la gestion des couleurs lorsqu'il existe une longue liste de couleurs et de nuances différentes.
Utilisez la carte des icônes pour diverses icônes de réseaux sociaux, par exemple : Facebook : "\e607" ou Twitter : "\e602".
Contrairement à d'autres bibliothèques de programmation, la carte Sass se composera uniquement du code qui va être utilisé

12) Expliquez en quoi les commentaires Sass sont différents des CSS classiques ?

La syntaxe des commentaires en CSS standard commence par /* comments…*/, tandis que dans SASS, il existe deux types de commentaires, les commentaires sur une seule ligne // et les commentaires CSS multilignes avec /* */.

13) Sass prend-il en charge les commentaires en ligne ?

Les commentaires sur une seule ligne // seront supprimés par le préprocesseur .scss et n'apparaîtront pas dans votre fichier .css

Tandis que le commentaire */ sont des CSS valides, et seront conservés entre la traduction de .scss vers votre fichier .css

14) Comment l'interpolation est utilisée dans Sass ?

Dans Sass, vous pouvez définir un élément dans une variable et l'interpoler dans le code Sass. C'est utile lorsque vous conservez vos modules dans des fichiers séparés.

15) Expliquez quand pouvez-vous utiliser les espaces réservés % dans Sass ?

%placeholders dans Sass est utile lorsque vous souhaitez écrire des styles destinés à être étendus, mais que vous ne voulez pas que les styles de base soient visibles dans les styles CSS de sortie

16) Est-il possible d'imbriquer des variables dans des variables dans Sass ?

L'interpolation des noms de variables n'est pas possible actuellement dans Sass. Cependant, vous pouvez utiliser l'interpolation des espaces réservés.

17) Quels sont les inconvénients et les avantages de Sass ?

Avantages:

Sass est facile à apprendre, en particulier pour ceux qui ont une formation en Python, Ruby ou Coffescript et qui utilisent des fonctions et écrivent des mixins.
CSS peut être facilement converti en Sass
Tout au long du projet, vous n'avez pas besoin de répéter des instructions CSS similaires en utilisant l'attribut @extend
Il permet de définir des variables utilisables tout au long du projet
Il permet de garder votre projet réactif plus organisé

Inconvénients:

Nécessite du temps pour apprendre les nouvelles fonctionnalités du préprocesseur avant de l'utiliser
Vous ne pourrez peut-être pas utiliser la fonction d'inspecteur d'éléments intégrée du navigateur
Le dépannage peut être difficile

18) Expliquez ce qui signifie MOINS ?

LESS est un langage de production de feuilles de style dynamique. LESS est un préprocesseur CSS et étend CSS avec un comportement dynamique. Il permet des variables, des mixins, des opérations et des fonctions. LESS fonctionne côté serveur et côté client.

19) Expliquez comment créer un fichier LESS et où le stocker et le compiler ?

La création ou le stockage d'un fichier LESS est similaire à la création/stockage d'un fichier CSS. Un nouveau fichier LESS peut être créé avec une extension .less, ou vous pouvez renommer le fichier .css existant en fichier .less. Vous pouvez écrire MOINS de code avec le code CSS existant.

La meilleure façon de le créer dans le dossier ~/content/ ou ~/Styles/

20) De quelles manières LESS peut-il être utilisé ?

Via npm LESS peut être utilisé sur la ligne de commande
Télécharger sous forme de fichier de script pour le navigateur
Pour les outils tiers, il est utilisé

21) Comment la variable est-elle représentée dans LESS ?

LESS permet de définir des variables. Dans LESS, la variable est représentée par @sing. Tandis que l'affectation des variables se fait avec un : (deux-points) chanter. Les valeurs des variables sont insérées dans le fichier de sortie CSS ainsi que dans le fichier minifié.

22) Expliquez en quoi Mixins est utile ?

Les mixins permettent d'intégrer toutes les propriétés d'une classe dans une autre classe en incluant le nom de la classe comme l'une de ses propriétés. C'est comme les variables mais pour des classes entières.

23) Expliquez comment définir le code en mode montre lorsque vous exécutez LESS.js dans un HTML5 navigateur?

Si vous exécutez LESS.js dans un navigateur HTML5, il utilisera le stockage local pour mettre en cache le CSS généré. Cependant, du point de vue du développeur, ils ne peuvent pas voir instantanément les modifications qu’ils ont apportées. Afin de voir vos modifications instantanément, vous pouvez charger le programme en mode développement et surveillance en suivant JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Expliquez quelle est la signification de l'imbrication dans la programmation LESS ?

L'imbrication dans LESS consiste à regrouper des instructions dans d'autres instructions, ce qui forme un groupe de code associé. En d’autres termes, lorsque nous ajoutons un extrait de code et y ajoutons un autre code, cet extrait de code est appelé imbrication.

25) Mentionnez quelles sont les fonctions de canal de couleur utilisées dans LESS ?

teinte
saturation
hsvhue
saturation
hswalue
rouge
et une transition qui soit juste.
Bleu
Alpha
luma
luminance

26) Expliquez qu'est-ce que data-uri dans LESS ?

En CSS, les URI de données sont l'une des meilleures techniques, elles permettent aux développeurs d'éviter le référencement d'images externes et de les intégrer directement dans une feuille de style. Les URI de données sont un excellent moyen de réduire les requêtes HTTP

27) Expliquez ce qu'est une « carte source moins en ligne » ?

L'option « Source Map Less Inline » indique que nous devons inclure tous les fichiers CSS dans le sourcemap. Ce qui signifie que vous n'avez besoin que de votre fichier cartographique pour accéder à votre source d'origine.

28) Expliquez à quoi sert Extend "all" dans LESS ?

Lorsque vous spécifiez tous les mots-clés en dernier dans un argument d'extension, cela indique à LESS de faire correspondre ce sélecteur dans le cadre d'un autre sélecteur.

29) Expliquez ce que signifie « StrictImports » dans LESS ?

Le strictImports contrôle si le compilateur autorisera un @import à l'intérieur des blocs @media ou d'autres blocs de sélection

30) Énumérez les différences entre LESS et Sass ?

Chaque langage de feuille de style est bon dans sa perspective et son utilisation ; il existe cependant peu de différences dans leur utilisation.

MAINTENANCE	Toupet
– LESS utilise JavaScript et est traité côté client	– Sass est codé en Ruby et donc traité côté serveur
– Les noms de variables sont précédés du symbole @	– Les noms de variables sont précédés du symbole $
- LESS n'hérite pas de plusieurs sélecteurs avec un seul ensemble de propriétés	– Sass hérite de plusieurs sélecteurs avec un seul ensemble de propriétés
– LESS ne fonctionne pas avec les unités « inconnues » et ne renvoie pas non plus de notification d’erreur de syntaxe pour les unités incompatibles ou les erreurs de syntaxe liées aux mathématiques	– Sass vous permet de travailler avec des unités « inconnues » renvoie également une notification d'erreur de syntaxe pour les unités incompatibles

31) Quelles sont les similitudes entre LESS et Sass ?

Entre LESS et Sass, les similitudes sont

Espaces de noms
Fonctions de couleur
Mixins et mixins paramétriques
Capacités d'imbrication
Évaluations JavaScript

32) Expliquez à quoi sert &combinator ?

&combinator concatène le sélecteur imbriqué avec le sélecteur parent. C'est utile pour les pseudo-classes telles que :hover et :focus

33) Expliquez à quoi servent les opérations dans LESS ?

Les opérations peuvent être utilisées pour exécuter des fonctions telles que

Opérateurs mathématiques simples : +, – , *, /
Fonctions de couleur
Fonctions mathématiques
N’importe quelle variable de taille ou de couleur peut être utilisée

34) Expliquez à quoi sert l'évasion ?

L’utilité de s’échapper en MOINS

Lorsque vous devez générer du CSS dont la syntaxe CSS n'est pas valide
Syntaxe propriétaire non reconnue par LESS
Le compilateur LESS générera une erreur s'il n'est pas utilisé
Préfixe simple avec le symbole ~ et mis entre guillemets

35) Que contiennent les éléments LESS ?

Moins d'éléments contiennent des mixins couramment utilisés comme

.pente
.arrondi
.opacité
.boîte ombre
.ombre-intérieure

36) Énumérez des alternatives à LESS ?

SASS : feuilles de style syntaxiquement impressionnantes
SCSS : Version.2 de SASS
Style

37) Expliquez comment vous pouvez appeler le compilateur à partir de la ligne de commande ?

Vous pouvez appeler le compilateur à partir de la ligne de commande dans LESS comme

$ moins de styles.moins

Cela affichera le CSS compilé vers sortie standard ; vous pourrez ensuite le rediriger vers un fichier de votre choix

$ lessc styles.less > styles.css

38) A quoi sert la fonction e() ?

Avec l'aide de la fonction e(), vous pouvez échapper une valeur afin qu'elle passe directement au CSS compilé, sans être remarqué par le compilateur LESS.

39) Expliquez comment vous pouvez pré-compiler LESS en CSS ?

Pour précompiler LESS en CSS, vous pouvez utiliser

Exécutez less.js à l'aide de Node.js : En utilisant le framework JavaScript Node.js, vous pouvez exécuter le script less.js en dehors du navigateur
Utiliser lessphp : Pour l'implémentation du compilateur LESS écrit en PHP, lessphp est utilisé
Utiliser le compilateur en ligne : utilisez le compilateur en ligne pour une compilation rapide du code LESS sans installer de compilateur
Moins. app (pour les utilisateurs de Mac) : Less.app est un outil gratuit pour les utilisateurs de Mac, cet outil les compile automatiquement dans des fichiers CSS

40) Expliquez comment la fonction de fusion est utilisée dans LESS ?

Pour agréger les valeurs de plusieurs propriétés dans une liste séparée par des espaces ou des virgules sous une seule propriété, LESS est utilisé. C'est utile pour les propriétés telles que la transformation et l'arrière-plan

41) Comment créer des structures en boucle dans LESS ?

Un mixin peut s'appeler en LESS. De tels mixins récursifs, lorsqu'ils sont combinés avec la correspondance de modèles et les expressions de garde, peuvent être utilisés pour créer diverses structures itératives/en boucle.

42) Pourquoi avons-nous besoin de mixins paramétriques dans LESS ?

Les mixins paramétriques sont identiques aux mixins standards. La seule différence est que les mixins paramétriques prennent des paramètres comme les fonctions en JavaScript. Après avoir déterminé les paramètres des mixins, vous obtenez plus de contrôle sur les mixins.