Οι κορυφαίες 40 ερωτήσεις και απαντήσεις συνεντεύξεων SASS (2025)

Ακολουθούν ερωτήσεις και απαντήσεις συνεντεύξεων SASS και SCSS για νεοφώτιστους καθώς και έμπειρους υποψηφίους για να πάρουν τη δουλειά των ονείρων τους.

1) Εξηγήστε τι είναι το Sass; Πώς μπορεί να χρησιμοποιηθεί;

Το Sass σημαίνει Syntactically Awesome Stylesheets και δημιουργήθηκε από τον Hampton Catlin. Είναι μια επέκταση του CSS3, προσθέτοντας ένθετους κανόνες, mixins, μεταβλητές, κληρονομικότητα επιλογέα κ.λπ.

Το Sass μπορεί να χρησιμοποιηθεί με τρεις τρόπους

Ως εργαλείο γραμμής εντολών
Ως αυτόνομη μονάδα Ruby
Ως πρόσθετο για οποιοδήποτε πλαίσιο με δυνατότητα Rack

Δωρεάν λήψη PDF: Ερωτήσεις και απαντήσεις συνέντευξης SASS

2) Αναφέρετε τα βασικά χαρακτηριστικά για το Sass;

Τα βασικά χαρακτηριστικά του Sass περιλαμβάνουν

Πλήρως συμβατό με CSS3
Επεκτάσεις γλώσσας όπως ένθεση, μεταβλητές και mixins
Πολλές χρήσιμες λειτουργίες για τον χειρισμό χρωμάτων και άλλων τιμών
Προηγμένες δυνατότητες όπως οδηγίες ελέγχου για βιβλιοθήκες
Καλά διαμορφωμένη, προσαρμόσιμη έξοδος

3) Καταγράψτε τους τύπους δεδομένων που υποστηρίζει το SassScript;

Το SassScript υποστηρίζει επτά βασικούς τύπους δεδομένων

Αριθμοί (π.χ. 1,5 ,10 εικονοστοιχεία)
Συμβολοσειρές κειμένων (π.χ., «foo», «bar» κ.λπ.)
Χρώματα (μπλε, #04a3f9)
Booleans (αληθές ή ψευδές)
Μηδενικά (π.χ. μηδενική)
Λίστα τιμών, διαχωρισμένες με κενό ή κόμμα (g., 1.5em, Arial, Helvetica κ.λπ.)
Χάρτες από τη μια τιμή στην άλλη (ζ., ( κλειδί 1: τιμή1, κλειδί 2: Τιμή 2))

4) Εξηγήστε πώς να ορίσετε μια μεταβλητή στο Sass;

Οι μεταβλητές στο Sass ξεκινούν με ένα σύμβολο ($) και η ανάθεση μεταβλητής γίνεται με άνω και κάτω τελεία(:).

5) Εξηγήστε ποια είναι η διαφορά μεταξύ Sass και SCSS;

Η διαφορά μεταξύ Sass και SCSS είναι ότι,

Ο Sass είναι α CSS προεπεξεργαστής με συντακτικές εξελίξεις και επέκταση του CSS3
Το Sass έχει δύο σύνταξη
Η πρώτη σύνταξη είναι "SCSS" και χρησιμοποιεί την επέκταση .scss
Η άλλη σύνταξη είναι σύνταξη με εσοχή ή απλώς "Sass" και χρησιμοποιεί την επέκταση .sass
Ενώ το Sass έχει χαλαρή σύνταξη με λευκό διάστημα και χωρίς ερωτηματικά, το SCSS μοιάζει περισσότερο με το CSS

Οποιοδήποτε έγκυρο έγγραφο CSS μπορεί να μετατραπεί σε Sass αλλάζοντας απλώς την επέκταση από.CSS σε.SCSS.

6) Σε τι χρησιμοποιείται το Selector Nesting στο Sass;

Στο Sass, η ένθεση επιλογέα προσφέρει έναν τρόπο για τους συντάκτες φύλλων στυλ να υπολογίζουν επιλογείς μεγάλου μήκους, τοποθετώντας μικρότερους επιλογείς ο ένας μέσα στον άλλο.

7) Εξηγήστε σε τι χρησιμοποιείται μια συνάρτηση @extend στο Sass;

Στο Sass, η οδηγία @EXTEND παρέχει έναν απλό τρόπο για να επιτρέψετε σε έναν επιλογέα να κληρονομήσει τα στυλ ενός άλλου. Στοχεύει στο να παρέχει έναν τρόπο για έναν επιλογέα Α να επεκτείνει τα στυλ από έναν επιλογέα Β. Όταν γίνει αυτό, ο επιλογέας Α θα προστεθεί στον επιλογέα Β, ώστε και οι δύο να μοιράζονται τις ίδιες δηλώσεις. Το @EXTEND αποτρέπει τη διόγκωση κώδικα ομαδοποιώντας επιλογείς που μοιράζονται το ίδιο στυλ σε έναν κανόνα.

8) Εξηγήστε ποια είναι η χρήση της συνάρτησης @IMPORT στο Sass;

Η συνάρτηση @IMPORT στο Sass

Επεκτείνει τον κανόνα εισαγωγής CSS ενεργοποιώντας την εισαγωγή αρχείων SCSS και Sass
Όλα τα εισαγόμενα αρχεία συγχωνεύονται σε ένα μόνο εξαγόμενο αρχείο CSS
Μπορεί ουσιαστικά να αναμειγνύει και να ταιριάζει με οποιοδήποτε αρχείο και να είναι σίγουρος για όλα τα στυλ σας
Το @IMPORT παίρνει ένα όνομα αρχείου για εισαγωγή

9) Γιατί το Sass θεωρείται καλύτερο από το LESS;

Το Saas σάς επιτρέπει να γράφετε επαναχρησιμοποιήσιμες μεθόδους και να χρησιμοποιείτε λογικές δηλώσεις, π.χ., βρόχους και όρους
Ο χρήστης Saas μπορεί να έχει πρόσβαση στη βιβλιοθήκη του Compass και να χρησιμοποιήσει μερικές εκπληκτικές δυνατότητες, όπως δημιουργία δυναμικού χάρτη sprite, παραβιάσεις του προγράμματος περιήγησης παλαιού τύπου και υποστήριξη μεταξύ προγραμμάτων περιήγησης για λειτουργίες CSS3
Το Compass σάς επιτρέπει επίσης να προσθέσετε ένα εξωτερικό πλαίσιο όπως Blueprint, Foundation ή Bootstrap στην κορυφή
Στο LESS, μπορείτε να γράψετε μια βασική λογική δήλωση χρησιμοποιώντας μια "φυλαγμένη μίξη", η οποία είναι ισοδύναμη με δηλώσεις Sass if
Στο LESS, μπορείτε να κάνετε βρόχο μέσω αριθμητικών τιμών χρησιμοποιώντας αναδρομικές συναρτήσεις, ενώ το Sass σας επιτρέπει να επαναλάβετε οποιοδήποτε είδος δεδομένων
Στο Sass, μπορείτε να γράψετε τις δικές σας χρήσιμες λειτουργίες

10) Εξηγήστε ποια είναι η χρήση της συνάρτησης Mixin στο Sass; Ποιο είναι το νόημα του DRY-out a mixin;

Το Mixin σάς επιτρέπει να ορίζετε στυλ που μπορούν να επαναχρησιμοποιηθούν σε όλο το φύλλο στυλ χωρίς να χρειάζεται να καταφύγετε σε μη σημασιολογικές κλάσεις όπως το .float-left.

Η ξήρανση από μια ανάμειξη σημαίνει ότι χωρίζεται σε δυναμικά και στατικά μέρη. Η δυναμική μίξη είναι αυτή που ο χρήστης πρόκειται να καλέσει στην πραγματικότητα και η στατική μίξη είναι τα κομμάτια των πληροφοριών που διαφορετικά θα αναπαράγονταν.

11) Εξηγήστε τι είναι το Sass Maps και ποια είναι η χρήση του Sass Maps;

Ο χάρτης Sass είναι ένα δομημένο δεδομένα με ιεραρχικό τρόπο και όχι απλώς μια δέσμη μεταβλητών. Μπορεί να βοηθήσει στην οργάνωση του κώδικα. Κάποια μεγάλη χρήση του Sass είναι

Είναι πολύ χρήσιμο όταν ασχολείστε με επίπεδα στοιχείων στο έργο σας
Μπορεί να είναι χρήσιμο στη διαχείριση χρώματος όταν υπάρχει μεγάλη λίστα διαφορετικών χρωμάτων και αποχρώσεων
Χρησιμοποιήστε τον χάρτη εικονιδίων για διάφορα εικονίδια μέσων κοινωνικής δικτύωσης, για παράδειγμα: facebook: '\e607' ή twitter: '\e602'
Σε αντίθεση με άλλες βιβλιοθήκες προγραμματισμού, ο χάρτης Sass θα αποτελείται μόνο από κώδικα που πρόκειται να χρησιμοποιηθεί

12) Εξηγήστε πώς διαφέρουν τα σχόλια Sass από τα κανονικά CSS;

Η σύνταξη για σχόλια σε κανονικό CSS ξεκινά με /* σχόλια…*/, ενώ στο SASS υπάρχουν δύο τύποι σχολίων, τα σχόλια μιας γραμμής // και τα σχόλια CSS πολλαπλών γραμμών με /* */.

13) Το Sass υποστηρίζει ενσωματωμένα σχόλια;

Τα σχόλια μιας γραμμής // θα αφαιρεθούν από τον προεπεξεργαστή .scss και δεν θα εμφανίζονται στο αρχείο σας .css

Ενώ το σχόλιο */ είναι έγκυρο CSS και θα διατηρηθεί μεταξύ της μετάφρασης από το .scss στο αρχείο σας .css

14) Πώς χρησιμοποιείται η παρεμβολή στο Sass;

Στο Sass, μπορείτε να ορίσετε ένα στοιχείο σε μια μεταβλητή και να το παρεμβάλετε μέσα στον κώδικα Sass. Είναι χρήσιμο όταν διατηρείτε τις μονάδες σας σε ξεχωριστά αρχεία.

15) Εξηγήστε πότε μπορείτε να χρησιμοποιήσετε τα %placeholders στο Sass;

Το %placeholders στο Sass είναι χρήσιμο όταν θέλετε να γράψετε στυλ που προορίζονταν να επεκταθούν, αλλά δεν θέλετε τα βασικά στυλ να φαίνονται στα στυλ CSS εξόδου

16) Είναι δυνατή η ένθεση μεταβλητών μέσα σε μεταβλητές στο Sass;

Η παρεμβολή των ονομάτων μεταβλητών δεν είναι δυνατή αυτήν τη στιγμή στο Sass. Ωστόσο, μπορείτε να χρησιμοποιήσετε παρεμβολή συμβόλων κράτησης θέσης.

17) Ποια είναι τα μειονεκτήματα και τα πλεονεκτήματα του Sass;

ΥΠΕΡ:

Το Sass είναι εύκολο να το μάθει κανείς ειδικά για εκείνους που έχουν υπόβαθρο Python, Ruby ή Coffescript και τοποθετούν χρησιμοποιώντας συναρτήσεις, γράφοντας mixins
Το CSS μπορεί εύκολα να μετατραπεί σε Sass
Σε όλο το έργο, δεν χρειάζεται να επαναλαμβάνετε παρόμοιες δηλώσεις CSS χρησιμοποιώντας το χαρακτηριστικό @extend
Επιτρέπει τον καθορισμό μεταβλητών που μπορούν να χρησιμοποιηθούν σε ολόκληρο το έργο
Διατηρεί το ανταποκρινόμενο έργο σας πιο οργανωμένο

ΚΑΤΑ:

Απαιτεί χρόνο για να μάθετε νέες δυνατότητες του προεπεξεργαστή πριν από τη χρήση
Ενδέχεται να μην μπορείτε να χρησιμοποιήσετε την ενσωματωμένη δυνατότητα επιθεώρησης στοιχείων του προγράμματος περιήγησης
Η αντιμετώπιση προβλημάτων μπορεί να είναι δύσκολη

18) Εξηγήστε τι είναι το LESS;

Το LESS είναι μια δυναμική γλώσσα παραγωγής φύλλων στυλ. Το LESS είναι ένας προεπεξεργαστής CSS και επεκτείνει το CSS με δυναμική συμπεριφορά. Επιτρέπει μεταβλητές, μίξεις, λειτουργίες και συναρτήσεις. Το LESS εκτελείται τόσο από την πλευρά του διακομιστή όσο και από την πλευρά του πελάτη.

19) Εξηγήστε πώς να δημιουργήσετε το αρχείο LESS και πού να το αποθηκεύσετε και να το μεταγλωττίσετε;

Η δημιουργία ή η αποθήκευση αρχείου LESS είναι παρόμοια με τη δημιουργία/αποθήκευση αρχείου CSS. Ένα νέο αρχείο LESS μπορεί να δημιουργηθεί με επέκταση .less ή μπορείτε να μετονομάσετε το υπάρχον αρχείο .css σε αρχείο .less. Μπορείτε να γράψετε LESS κώδικα με τον υπάρχοντα κώδικα CSS.

Ο καλύτερος τρόπος για να το δημιουργήσετε μέσα στο φάκελο ~/content/ ή ~/Styles/

20) Με ποιους τρόπους μπορεί να χρησιμοποιηθεί το LESS;

Μέσω npm Το LESS μπορεί να χρησιμοποιηθεί στη γραμμή εντολών
Λήψη ως αρχείο σεναρίου για το πρόγραμμα περιήγησης
Για εργαλεία τρίτων, χρησιμοποιείται

21) Πώς η μεταβλητή αναπαρίσταται στο LESS;

Το LESS επιτρέπει τον ορισμό μεταβλητών. Στο LESS, η μεταβλητή αναπαρίσταται ως @sing. Ενώ, η ανάθεση μεταβλητής γίνεται με ένα: (πάνω τελεία) sing. Οι τιμές των μεταβλητών εισάγονται στο αρχείο εξόδου CSS καθώς και στο ελαχιστοποιημένο αρχείο.

22) Εξηγήστε πώς είναι χρήσιμο το Mixins;

Οι μίξεις επιτρέπουν την ενσωμάτωση όλων των ιδιοτήτων μιας κλάσης σε μια άλλη κλάση συμπεριλαμβάνοντας το όνομα της κλάσης ως μία από τις ιδιότητές της. Είναι ακριβώς όπως οι μεταβλητές αλλά για ολόκληρες τάξεις.

23) Εξηγήστε πώς μπορείτε να ορίσετε κώδικα σε λειτουργία ρολογιού όταν εκτελείτε το LESS.js σε ένα HTML5 πρόγραμμα περιήγησης;

Εάν εκτελείτε το LESS.js σε ένα πρόγραμμα περιήγησης HTML5, θα χρησιμοποιήσει τοπικό χώρο αποθήκευσης για την προσωρινή αποθήκευση του CSS που δημιουργήθηκε. Ωστόσο, από την άποψη του προγραμματιστή δεν μπορούν να δουν τις αλλαγές που έκαναν αμέσως. Για να δείτε τις αλλαγές σας άμεσα, μπορείτε να φορτώσετε το πρόγραμμα σε λειτουργία ανάπτυξης και παρακολούθησης ακολουθώντας JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Εξηγήστε ποια είναι η έννοια της ένθεσης στον προγραμματισμό LESS;

Η ένθεση στο LESS είναι ομαδοποίηση εντολών μέσα σε άλλες εντολές, επομένως σχηματίζει μια ομάδα σχετικού κώδικα. Με άλλα λόγια, όταν προσθέτουμε ένα απόσπασμα κώδικα και προσθέτουμε έναν άλλο κώδικα μέσα σε αυτό, τότε αυτό το απόσπασμα κώδικα ονομάζεται ένθεση.

25) Αναφέρετε ποιες είναι οι λειτουργίες του καναλιού χρώματος που χρησιμοποιούνται στο LESS;

απόχρωση
κορεσμός
hsvhue
κορεσμός
hswalue
Red
πράσινος
μπλε
άλφα
λούμα
φωτεινότητα

26) Εξηγήστε τι είναι το data-uri στο LESS;

Στο CSS, το Data URI's είναι μια από τις καλύτερες τεχνικές, επιτρέπει στους προγραμματιστές να αποφεύγουν την εξωτερική αναφορά εικόνων και να τις ενσωματώνουν απευθείας σε ένα φύλλο στυλ. Τα URI δεδομένων είναι ο εξαιρετικός τρόπος μείωσης των αιτημάτων HTTP

27) Εξηγήστε τι «Χάρτης πηγής λιγότερο ενσωματωμένος»;

Η επιλογή "Χάρτης πηγής λιγότερο ενσωματωμένος" υποδεικνύει ότι πρέπει να συμπεριλάβουμε όλα τα αρχεία CSS στον χάρτη προέλευσης. Που σημαίνει ότι χρειάζεστε μόνο το αρχείο χάρτη σας για να φτάσετε στην αρχική σας πηγή.

28) Εξηγήστε ποια είναι η χρήση του Extend “all” στο LESS;

Όταν προσδιορίζετε όλες τις λέξεις-κλειδιά τελευταία σε ένα όρισμα επέκτασης, λέει στο LESS να ταιριάζει με αυτόν τον επιλογέα ως μέρος ενός άλλου επιλογέα.

29) Εξηγήστε τι είναι το "StrictImports" στο LESS;

Το strictImports ελέγχει εάν ο μεταγλωττιστής θα επιτρέψει μια @import είτε σε μπλοκ @media είτε σε άλλα μπλοκ επιλογής

30) Καταγράψτε τις διαφορές μεταξύ LESS και Sass;

Κάθε γλώσσα φύλλου στυλ είναι καλή ως προς την οπτική και τη χρήση της. Ωστόσο, υπάρχουν λίγες διαφορές στη χρήση τους.

ΛΙΓΟΤΕΡΟ	Sass
– Το LESS χρησιμοποιεί JavaScript και υποβάλλεται σε επεξεργασία από την πλευρά του πελάτη	– Το Sass κωδικοποιείται σε Ruby και επομένως υποβάλλεται σε επεξεργασία στην πλευρά του διακομιστή
– Τα ονόματα των μεταβλητών προτάσσονται με το σύμβολο @	– Το όνομα της μεταβλητής προτάσσεται με το σύμβολο $
– Το LESS δεν κληρονομεί πολλαπλούς επιλογείς με ένα σύνολο ιδιοτήτων	– Το Sass κληρονομεί πολλαπλούς επιλογείς με ένα σύνολο ιδιοτήτων
– Το LESS δεν λειτουργεί με «άγνωστες» μονάδες ούτε επιστρέφει ειδοποίηση συντακτικού σφάλματος για μη συμβατές μονάδες ή συντακτικό σφάλμα που σχετίζεται με μαθηματικά	– Το Sass σάς επιτρέπει να εργάζεστε με "άγνωστες" μονάδες επιστρέφει επίσης μια ειδοποίηση συντακτικού σφάλματος για μη συμβατές μονάδες

31) Ποιες είναι οι ομοιότητες μεταξύ LESS και Sass;

Μεταξύ LESS και Sass οι ομοιότητες είναι

Namespaces
Λειτουργίες χρώματος
Μίξη και παραμετρική μίξη
Δυνατότητες ένθεσης
Αξιολογήσεις JavaScript

32) Εξηγήστε ποια είναι η χρήση του &combinator;

Ο &combinator συνενώνει τον ένθετο επιλογέα με τον γονικό επιλογέα. Είναι χρήσιμο για ψευδοκλάσεις όπως :hover και :focus

33) Εξηγήστε ποια είναι η χρήση των πράξεων στο LESS;

Οι λειτουργίες μπορούν να χρησιμοποιηθούν για την εκτέλεση λειτουργιών όπως

Απλοί μαθηματικοί τελεστές: +, – , *, /
Λειτουργίες χρώματος
Μαθηματικές συναρτήσεις
Μπορεί να χρησιμοποιηθεί οποιοδήποτε μέγεθος ή μεταβλητή χρώματος

34) Εξηγήστε ποια είναι η χρήση του Escape;

Η χρήση της απόδρασης στο LESS

Όταν πρέπει να εξάγετε CSS που δεν είναι έγκυρη σύνταξη CSS
Η ιδιόκτητη σύνταξη δεν αναγνωρίζεται από το LESS
Ο μεταγλωττιστής LESS θα εμφανίσει σφάλμα εάν δεν χρησιμοποιηθεί
Απλό πρόθεμα με σύμβολο ~ και βάλτε σε εισαγωγικά

35) Τι περιέχει τα LESS στοιχεία;

Λιγότερα στοιχεία περιέχουν μίξεις που χρησιμοποιούνται συνήθως όπως

.κλίση
.στρογγυλεμένο
.αδιαφάνεια
.κουτί-σκιά
.εσωτερική-σκιά

36) Αναφέρετε εναλλακτικές λύσεις έναντι LESS;

SASS: Συντακτικά φοβερά φύλλα στυλ
SCSS: Έκδοση 2 του SASS
Stylus

37) Εξηγήστε πώς μπορείτε να καλέσετε τον μεταγλωττιστή από τη γραμμή εντολών;

Μπορείτε να καλέσετε τον μεταγλωττιστή από τη γραμμή εντολών στο LESS as

$ lessc styles.less

Αυτό θα εξάγει το μεταγλωττισμένο CSS στο stdout? Στη συνέχεια, μπορείτε να το ανακατευθύνετε σε ένα αρχείο της επιλογής σας

$ lessc styles.less > styles.css

38) Ποια είναι η χρήση της συνάρτησης e ();

Με τη βοήθεια της συνάρτησης e() μπορείτε να ξεφύγετε από μια τιμή ώστε να περάσει κατευθείαν στο μεταγλωττισμένο CSS, χωρίς να γίνει αντιληπτή από τον μεταγλωττιστή LESS.

39) Εξηγήστε πώς μπορείτε να προμεταγλωττίσετε το LESS σε CSS;

Για να προμεταγλωττίσετε το LESS σε CSS μπορείτε να χρησιμοποιήσετε

Εκτέλεση του less.js χρησιμοποιώντας το Node.js : Χρησιμοποιώντας το πλαίσιο JavaScript Node.js μπορείτε να εκτελέσετε το σενάριο less.js εκτός του προγράμματος περιήγησης
Χρήση lessphp: Για την υλοποίηση του μεταγλωττιστή LESS γραμμένο σε PHP, χρησιμοποιείται το lessphp
Χρήση διαδικτυακού μεταγλωττιστή: Χρησιμοποιήστε διαδικτυακό μεταγλωττιστή για γρήγορη μεταγλώττιση κώδικα LESS χωρίς εγκατάσταση μεταγλωττιστή
Μείον. app (για χρήστες Mac): Το Less.app είναι ένα δωρεάν εργαλείο για χρήστες Mac, αυτό το εργαλείο τα μεταγλωττίζει αυτόματα σε αρχεία CSS

40) Εξηγήστε πώς χρησιμοποιείται η συνάρτηση συγχώνευσης στο LESS;

Για τη συγκέντρωση τιμών από πολλές ιδιότητες σε μια λίστα διαχωρισμένη με κενό ή κόμμα κάτω από μια μεμονωμένη ιδιότητα χρησιμοποιείται LESS. Είναι χρήσιμο για ιδιότητες όπως μετασχηματισμός και φόντο

41) Πώς μπορείτε να δημιουργήσετε δομές βρόχου στο LESS;

Ένα mixin μπορεί να αυτοαποκαλείται σε LESS. Τέτοιες αναδρομικές μίξεις, όταν συνδυάζονται με αντιστοίχιση μοτίβων και εκφράσεις προστασίας, μπορούν να χρησιμοποιηθούν για τη δημιουργία διαφόρων επαναληπτικών/βρόχων δομών.

42) Γιατί χρειαζόμαστε παραμετρικές μίξεις στο LESS;

Οι παραμετρικές μίξεις είναι οι ίδιες με τις τυπικές μίξεις. Η μόνη διαφορά είναι ότι τα παραμετρικά mixins λαμβάνουν παραμέτρους όπως συναρτήσεις στο JavaScript. Αφού καθορίσετε τις παραμέτρους στα mixins, έχετε περισσότερο έλεγχο στα mixins.