Κοινή χρήση τεχνολογίας

scss έννοιες και χρήση

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Πίνακας περιεχομένων

τι είναι το scss

Σύγκριση μεταξύ scss και css

Χρήση scss

δηλώνουν μεταβλητές

Διαφοροποίηση προεπιλεγμένων μεταβλητών

Διάκριση μεταξύ καθολικών μεταβλητών και τοπικών μεταβλητών

Ένθετη σύνταξη

Φωλιάζει επιλογέας

βασική φωλιά

Ένθετη αναφορά επιλογέα γονέα (&)

Θεωρήσεις ένθεσης

ένθετος ένθετος

Φωλιά ιδιοκτησίας

Βασικό χαρακτηριστικό ένθεσης

Θεωρήσεις ένθεσης

κληρονομώ

Βασική χρήση

Σημειώσεις για την κληρονομιά

Σενάρια εφαρμογής

Placeholder%

ορίστε το σύμβολο κράτησης θέσης

σύμβολο κράτησης θέσης κληρονομιάς

Πλεονεκτήματα και ισχύοντα σενάρια

Προφυλάξεις

Ανακατεύουμε το @mixin

Ορίστε το μείγμα

μίγμα κλήσης

παράδειγμα

Πλεονεκτήματα και ισχύοντα σενάρια

Προφυλάξεις

Το SCSS χρησιμοποιεί εντολές υπό όρους

δήλωση @if

δηλώσεις @else και @else if

Ένθεση προτάσεων υπό όρους

Συμπερασματικά

Τρεις τύποι βρόχων στο SCSS

@for loop

@κάθε βρόχο

@while βρόχος

Συνοψίζω

Προσαρμοσμένες λειτουργίες και χρήση

Ορίστε προσαρμοσμένες λειτουργίες

Χρησιμοποιήστε προσαρμοσμένες λειτουργίες

Προφυλάξεις

Εργασία για το σπίτι

τι είναι το scss

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

Ακολουθούν ορισμένα πλεονεκτήματα του SCSS:

  • Μεταβλητές: Το SCSS επιτρέπει τη χρήση μεταβλητών για την αποθήκευση τιμών όπως χρώματα, μεγέθη γραμματοσειρών κ.λπ., καθιστώντας πιο βολικό και διατηρητέο ​​την ομοιόμορφη προσαρμογή αυτών των τιμών σε ολόκληρο το φύλλο στυλ.
  • Ένθετοι κανόνες: Οι ένθετοι κανόνες μπορούν να χρησιμοποιηθούν στο SCSS για την οργάνωση στυλ, ώστε η δομή του κώδικα να είναι πιο σαφής. Για παράδειγμα, μπορείτε να γράψετε το στυλ ψευδο-κλάσης ενός στοιχείου στο μπλοκ στυλ του γονικού του στοιχείου αντί να το γράψετε σε πολλά σημεία.
  • Mixins: Τα Mixins είναι ένας τρόπος συνδυασμού ενός συνόλου ιδιοτήτων στυλ σε ένα μπλοκ επαναχρησιμοποιήσιμο. Αυτό αποφεύγει την επανειλημμένη σύνταξη του ίδιου στυλ κώδικα και βελτιώνει την επαναχρησιμοποίηση και την αναγνωσιμότητα του κώδικα.
  • Εισαγωγή (Εσωτερικές εισαγωγές): Πολλά αρχεία SCSS μπορούν να συγχωνευθούν σε ένα αρχείο μέσω του κανόνα @import. Αυτή η προσέγγιση βοηθά στη διαίρεση του φύλλου στυλ σε λογικές μονάδες και μπορεί να οργανωθεί και να διαχειρίζεται με ευελιξία όπως απαιτείται.
  • Κληρονομικότητα (Επέκταση): Το SCSS υποστηρίζει κληρονομικότητα στυλ μέσω της λέξης-κλειδιού @extend, η οποία μπορεί να κάνει το φύλλο στυλ πιο αρθρωτό και διατηρήσιμο.
  • Λειτουργίες: Το SCSS επιτρέπει μαθηματικές πράξεις σε φύλλα στυλ, όπως πρόσθεση, αφαίρεση, πολλαπλασιασμό και διαίρεση, κάτι που είναι χρήσιμο για τον χειρισμό ορισμένων υπολογισμών δυναμικού στυλ.
  • Αρθρωτότητα: Τα χαρακτηριστικά του SCSS κάνουν τα φύλλα στυλ πιο αρθρωτά και δομημένα, τα οποία μπορούν να διαχειριστούν και να διατηρήσουν καλύτερα τα στυλ, ειδικά σε μεγάλα έργα.

Συνοπτικά, το SCSS όχι μόνο διατηρεί όλες τις λειτουργίες του CSS, αλλά εισάγει επίσης προηγμένα χαρακτηριστικά, όπως μεταβλητές, ένθεση, μίξη, εισαγωγή κ.λπ. ένα από τα εργαλεία.

Σύγκριση μεταξύ scss και css

γραμματική:

  • CSS: Βασική σύνταξη του φύλλου στυλ, οι κανόνες ορίζονται μέσω επιλογέων, χαρακτηριστικών και τιμών.
  • SCSS: Η SCSS είναι μια γλώσσα προεπεξεργαστή για CSS Παρέχει περισσότερες λειτουργίες και σύνταξη, όπως μεταβλητές, ένθετους κανόνες, μίξεις, εισαγωγές κ.λπ., που κάνουν τη γραφή των φύλλων στυλ πιο ευέλικτη και αποτελεσματική.

Αναγνωσιμότητα και δυνατότητα συντήρησης:

  • CSS: Σε μεγαλύτερα έργα, τα αρχεία CSS μπορεί να γίνουν πολύ περιεκτικά και δύσκολα στη συντήρηση, επειδή δεν διαθέτουν δομημένα και αρθρωτά χαρακτηριστικά.
  • SCSS: Το SCSS υποστηρίζει μεταβλητές και ένθετους κανόνες. Χρησιμοποιώντας μεταβλητές και mixins, η επαναλαμβανόμενη γραφή κώδικα μπορεί να μειωθεί και οι ένθετοι κανόνες μπορούν να εκφράσουν την ιεραρχική σχέση της δομής HTML πιο καθαρά.

Επέκταση λειτουργίας:

  • CSS: Το τυπικό CSS μπορεί να κάνει μόνο βασικό ορισμό στυλ και αντιστοίχιση επιλογέα.
  • SCSS: Το SCSS εισάγει προηγμένες λειτουργίες όπως η μίξη, η κληρονομικότητα και οι υπολογισμοί Αυτές οι λειτουργίες κάνουν τα φύλλα στυλ πιο ευέλικτα και ισχυρά και μπορούν να ανταπεξέλθουν καλύτερα σε πολύπλοκες απαιτήσεις στυλ.

συμβατότητα:

  • CSS: Τα προγράμματα περιήγησης υποστηρίζουν απευθείας το CSS, δεν απαιτούνται πρόσθετα βήματα μεταγλώττισης.
  • SCSS: Το SCSS πρέπει να μετατραπεί σε ένα κανονικό αρχείο CSS από έναν μεταγλωττιστή για να γίνει κατανοητό και εφαρμοσμένο από το πρόγραμμα περιήγησης.

καμπύλη εκμάθησης:

  • CSS: Η εκμάθηση του CSS είναι σχετικά απλή, απλώς κατανοήστε τον βασικό συνδυασμό επιλογέων, ιδιοτήτων και τιμών.
  • SCSS: Η εκμάθηση του SCSS απαιτεί τον έλεγχο της μοναδικής σύνταξης και των λειτουργιών του, όπως μεταβλητές, μίξη, ένθεση κ.λπ., κάτι που απαιτεί μια συγκεκριμένη διαδικασία μάθησης και προσαρμογής.

Συνοψίζοντας, σε σύγκριση με το συνηθισμένο CSS, το SCSS παρέχει περισσότερα εργαλεία και δυνατότητες για την απλοποίηση της γραφής και της συντήρησης φύλλων στυλ και είναι ιδιαίτερα κατάλληλο για την ανάπτυξη μεγάλων και πολύπλοκων έργων. Ωστόσο, για μικρά έργα ή απλές ανάγκες στυλ, το απλό CSS μπορεί να είναι πιο απλό και βολικό.

Χρήση scss

Πριν μάθετε scss, εγκαταστήστε πρώτα δύο πρόσθετα στο vscode για να μετατρέψετε το scss σε συνηθισμένα αρχεία CSS για μετέπειτα εκμάθηση!

Αναζητήστε το sass στο κατάστημα προσθηκών, κατεβάστε τα δύο παρακάτω πρόσθετα και επανεκκινήστε το vscode!

δηλώνουν μεταβλητές

Η δήλωση μεταβλητών στο SCSS είναι πολύ απλή, μπορείτε να χρησιμοποιήσετε το σύμβολο $ για να ορίσετε μεταβλητές.

Ακολουθεί ένα απλό παράδειγμα που δείχνει πώς να δηλώνετε και να χρησιμοποιείτε μεταβλητές στο SCSS:

  1. // 定义变量
  2. $primary-color: #3498db;
  3. $secondary-color: #2ecc71;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

Στο παραπάνω παράδειγμα, ορίσαμε δύο μεταβλητές $primary-color και $secondary-color για να αποθηκεύσουμε το κύριο χρώμα και το δευτερεύον χρώμα αντίστοιχα. Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε αυτές τις μεταβλητές σε κανόνες στυλ για να διατηρήσουμε τα χρώματα συνεπή και εύκολα να τροποποιηθούν σε όλο το φύλλο στυλ.

Όταν ένα αρχείο SCSS μεταγλωττίζεται σε ένα κανονικό αρχείο CSS, όλες οι μεταβλητές θα αντικατασταθούν με τις αντίστοιχες τιμές τους, επομένως το τελικό αρχείο CSS που δημιουργείται δεν θα περιέχει δηλώσεις μεταβλητών.

Διαφοροποίηση προεπιλεγμένων μεταβλητών

Στο SCSS, μπορείτε να χρησιμοποιήσετε προεπιλεγμένες μεταβλητές για να διασφαλίσετε ότι μια μεταβλητή έχει μια εναλλακτική τιμή εάν δεν έχει οριστεί. Αυτό είναι ιδιαίτερα χρήσιμο όταν εργάζεστε με θέμα ή διαμορφώνετε στυλ.

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

  1. // 声明变量，并设置默认值
  2. $primary-color: #3498db !default;
  3. $secondary-color: #2ecc71 !default;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

Στο παραπάνω παράδειγμα, χρησιμοποιήσαμε την ετικέτα !default για να ορίσουμε την προεπιλεγμένη τιμή. Αυτό σημαίνει ότι εάν το $primary-color ή το $secondary-color δεν οριστούν αλλού πριν εισαχθούν σε αυτό το αρχείο SCSS, θα χρησιμοποιήσουν τις καθορισμένες προεπιλεγμένες τιμές (#3498db και #2ecc71). Εάν αυτές οι μεταβλητές έχουν οριστεί πριν από την εισαγωγή του αρχείου, οι προεπιλεγμένες τιμές θα αγνοηθούν.

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

Διάκριση μεταξύ καθολικών μεταβλητών και τοπικών μεταβλητών

  • Καθολικές μεταβλητές: Οι καθολικές μεταβλητές είναι μεταβλητές που δηλώνονται εκτός επιλογέα ή εκτός μίκτη/συνάρτησης. Είναι προσβάσιμα σε όλο το φύλλο στυλ και εάν η ίδια καθολική μεταβλητή οριστεί σε πολλά αρχεία, οι τιμές τους θα παραμείνουν συνεπείς.
  • Τοπικές μεταβλητές: Οι τοπικές μεταβλητές είναι μεταβλητές που ορίζονται μέσα σε έναν επιλογέα ή μέσα σε έναν μείκτη/συνάρτηση. Μπορούν να χρησιμοποιηθούν μόνο εντός του πεδίου εφαρμογής στο οποίο ορίζονται και δεν ισχύουν πλέον εκτός αυτού του πεδίου εφαρμογής.

Σημείωση: οι τοπικές μεταβλητές αντικαθιστούν τις καθολικές μεταβλητές

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

Χρησιμοποιήστε τη λέξη-κλειδί !global για να μετατρέψετε τις τοπικές μεταβλητές σε καθολικές μεταβλητές

Το SCSS παρέχει τη λέξη-κλειδί !global για να δηλώνει ρητά τις τοπικές μεταβλητές ως καθολικές μεταβλητές. Αυτό προκαλεί την προώθηση της τιμής μιας τοπικής μεταβλητής στο καθολικό εύρος όπου δηλώνεται, αντικαθιστώντας οποιαδήποτε υπάρχουσα καθολική μεταβλητή με το ίδιο όνομα.

Παράδειγμα:

  1. // 全局变量
  2. $primary-color: #3498db;
  3.  
  4. .button {
  5.   // 局部变量，覆盖全局变量
  6.   $primary-color: #cc582e;
  7.   background-color: $primary-color; // 使用局部变量值
  8. }
  9.  
  10. // 使用 !global 将局部变量变为全局变量
  11. $primary-color: #cddb34;
  12.  
  13. .button {
  14.   // 使用 !global 将局部变量变为全局变量
  15.   $primary-color: #2ecc71 !global;
  16. }
  17.  
  18. body {
  19.   background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
  20. }

Στο πρώτο παράδειγμα, η τοπική μεταβλητή $primary-color μέσα στον επιλογέα .button παρακάμπτει την τιμή της καθολικής μεταβλητής. Στο δεύτερο παράδειγμα, χρησιμοποιώντας τη λέξη-κλειδί !global, οι τοπικές μεταβλητές μέσα στον επιλογέα .button μετατρέπονται σε καθολικές μεταβλητές, επηρεάζοντας έτσι τις τιμές των μεταβλητών στο καθολικό εύρος.

Ένθετη σύνταξη

Φωλιάζει επιλογέας

βασική φωλιά

Η ένθεση επιλογέα επιτρέπει την ένθεση κανόνων στυλ για θυγατρικούς επιλογείς μέσα σε γονικούς επιλογείς, για παράδειγμα:

  1. // SCSS代码
  2. .navbar {
  3.   background-color: #333;
  4.   padding: 10px;
  5.  
  6.   ul {
  7.     list-style: none;
  8.     margin: 0;
  9.     padding: 0;
  10.  
  11.     li {
  12.       display: inline-block;
  13.       margin-right: 10px;
  14.  
  15.       a {
  16.         text-decoration: none;
  17.         color: #fff;
  18.  
  19.         &:hover {
  20.           text-decoration: underline;
  21.         }
  22.       }
  23.     }
  24.   }
  25. }

Στον παραπάνω κώδικα, ο επιλογέας .navbar περιέχει ένα ένθετο ul, li και έναν υποεπιλογέα. Αυτή η ένθετη δομή κάνει τους κανόνες στυλ πιο σαφείς και ευκολότερους στη διαχείριση.

Ένθετη αναφορά επιλογέα γονέα (&)

Στο SCSS, το σύμβολο & χρησιμοποιείται για να αναφέρεται σε έναν γονικό επιλογέα, ιδιαίτερα χρήσιμο στην περίπτωση ψευδοκλάσεων ή ψευδοστοιχείων. Για παράδειγμα, χρησιμοποιήστε το &:hover για να αναφέρετε τον γονικό επιλογέα του τρέχοντος επιλογέα και να προσθέσετε ένα στυλ κατάστασης :hover.

  1. .button {
  2.   background-color: #3498db;
  3.   color: #fff;
  4.   padding: 8px 16px;
  5.   border: none;
  6.   text-align: center;
  7.   text-decoration: none;
  8.   display: inline-block;
  9.  
  10.   &:hover {
  11.     background-color: #2980b9;
  12.   }
  13. }

Θεωρήσεις ένθεσης
  • Βάθος επιλογέα: Αποφύγετε την υπερβολικά βαθιά ένθεση του επιλογέα, καθώς μπορεί να αυξήσει την προτεραιότητα του στυλ, δυσκολεύοντας τις παρακάμψεις στυλ και τη συντήρηση.
  • Αναγνωσιμότητα: Όταν χρησιμοποιείτε ένθεση επιλογέα, προσέξτε να διατηρείτε τον κώδικα ευανάγνωστο και σαφή και αποφύγετε τις υπερβολικά περίπλοκες ένθετες δομές.
  • Απόδοση: Οι ένθετες δομές μπορεί να αυξήσουν το μέγεθος του αρχείου CSS που δημιουργείται, αλλά συνήθως μπορούν να βελτιστοποιηθούν με σωστή οργάνωση και γραφή στο στυλ.
ένθετος ένθετος

Το SCSS επιτρέπει πολλαπλά επίπεδα ένθεσης επιλογέα, για παράδειγμα:

  1. .container {
  2.   .row {
  3.     .col {
  4.       width: 100%;
  5.     }
  6.   }
  7. }

Φωλιά ιδιοκτησίας

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

Βασικό χαρακτηριστικό ένθεσης

Η ένθεση ιδιοτήτων μπορεί να χρησιμοποιηθεί για την τοποθέτηση σχετικών ιδιοτήτων σε ένα μπλοκ κώδικα, για παράδειγμα:

  1. .navbar {
  2.   font: {
  3.     family: Arial, sans-serif;
  4.     size: 16px;
  5.     weight: bold;
  6.   }
  7.   margin: {
  8.     top: 10px;
  9.     bottom: 15px;
  10.   }
  11.   padding: {
  12.     left: 20px;
  13.     right: 20px;
  14.   }
  15. }

Στο παραπάνω παράδειγμα, τα μπλοκ γραμματοσειράς, περιθωρίου και συμπλήρωσης περιέχουν σχετικά χαρακτηριστικά. Αυτή η οργάνωση καθιστά τις ιδιότητες σε κάθε μπλοκ πιο σαφείς και ευκολότερες στην τροποποίηση και διατήρηση.

Θεωρήσεις ένθεσης
  • Υποστηριζόμενες ιδιότητες: Δεν υποστηρίζουν όλες οι ιδιότητες CSS την ένθεση, συνήθως εκείνες που μπορούν να δεχτούν ζεύγη κλειδιού-τιμής, όπως γραμματοσειρά, περιθώριο, συμπλήρωμα, περίγραμμα κ.λπ.
  • Αναγνωσιμότητα: Όταν χρησιμοποιείτε την ένθεση χαρακτηριστικών, βεβαιωθείτε ότι είναι αναγνωσιμότητα και σαφήνεια του κώδικα και αποφύγετε την υπερβολική ένθεση και πολύπλοκες δομές.
  • Ένθετη ένθεση: Μπορείτε επίσης να τοποθετήσετε άλλες ιδιότητες μέσα σε φωλιές ιδιοκτησίας, οι οποίες μπορούν να οργανώσουν και να δομήσουν περαιτέρω τα στυλ σας.

κληρονομώ

Στο SCSS, η κληρονομικότητα (Extend) είναι μια πολύ χρήσιμη δυνατότητα που επιτρέπει σε έναν επιλογέα να κληρονομήσει τους κανόνες στυλ ενός άλλου επιλογέα. Αυτή η δυνατότητα μειώνει τον διπλότυπο κώδικα CSS και κάνει τα φύλλα στυλ πιο αρθρωτά και ευκολότερα στη συντήρηση.

Βασική χρήση

Η κληρονομικότητα επιλογέα μπορεί να επιτευχθεί χρησιμοποιώντας τη λέξη-κλειδί @extend. Για παράδειγμα:

  1. %message-shared {
  2.   border: 1px solid #ccc;
  3.   padding: 10px;
  4.   color: #333;
  5. }
  6.  
  7. .success-message {
  8.   @extend %message-shared;
  9.   background-color: lightgreen;
  10. }
  11.  
  12. .error-message {
  13.   @extend %message-shared;
  14.   background-color: lightcoral;
  15. }

Στο παραπάνω παράδειγμα, το %message-shared είναι ένας επιλογέας κράτησης θέσης που ορίζει ένα κοινό σύνολο στυλ. Τα .success-message και .error-message αντίστοιχα κληρονομούν το στυλ %message-shared και προσθέτουν τα δικά τους χρώματα φόντου.

Σημειώσεις για την κληρονομιά

  • Σειρά επιλογέα: Η κληρονομικότητα μπορεί να δημιουργήσει μια μεγάλη λίστα επιλογέων, η οποία μπορεί να επηρεάσει την προτεραιότητα στυλ. Βεβαιωθείτε ότι η σειρά και η θέση των επιλογέων είναι σωστή όταν χρησιμοποιείτε το @extend για να αποφύγετε περιττά προβλήματα προτεραιότητας.
  • Περιορισμός: Οι κληρονομημένοι επιλογείς πρέπει να εμφανίζονται μετά τον κληρονομημένο επιλογέα. Αυτό σημαίνει ότι εάν ορίσετε έναν επιλογέα στο αρχείο SCSS και χρησιμοποιήσετε το @extend για να κληρονομήσει το στυλ του στον επόμενο κώδικα, αυτή η κληρονομικότητα θα τεθεί σε ισχύ μόνο αφού οριστεί.
  • Επιλογείς θέσης έναντι επιλογέων κλάσεων: Οι επιλογείς θέσης που ξεκινούν με % είναι γενικά καλύτεροι στόχοι για κληρονομικότητα από τους άμεσους επιλογείς κλάσεων επειδή δεν δημιουργούν περιττούς επιλογείς μετά τη μεταγλώττιση. Οι επιλογείς κλάσεων, από την άλλη πλευρά, θα δημιουργήσουν διπλότυπα στυλ παντού όπου χρησιμοποιούνται, αυξάνοντας το μέγεθος και την πολυπλοκότητα του αρχείου.

Σενάρια εφαρμογής

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

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

Placeholder%

Το σύμβολο κράτησης θέσης % είναι ένας ειδικός επιλογέας στο SCSS που χρησιμοποιείται συχνά για τον καθορισμό κανόνων στυλ που μπορούν να κληρονομηθούν αλλά δεν δημιουργούν πραγματική έξοδο CSS. ΕΙΔΙΚΑ:

ορίστε το σύμβολο κράτησης θέσης

  1. %placeholder-selector {
  2.   // 样式规则
  3. }

Στο παραπάνω παράδειγμα, %placeholder-selector είναι ένας επιλογέας κράτησης θέσης που ξεκινά με %. Ορίζει ένα σύνολο κανόνων στυλ, αλλά το αντίστοιχο όνομα επιλογέα δεν θα εμφανίζεται στο μεταγλωττισμένο CSS.

σύμβολο κράτησης θέσης κληρονομιάς

  1. .some-class {
  2.   @extend %placeholder-selector;
  3.   // 可选的额外样式
  4. }

Η χρήση της λέξης-κλειδιού @extend επιτρέπει στο .some-class να κληρονομήσει το στυλ του %placeholder-selector. Αυτό σημαίνει ότι το .some-class θα εφαρμόσει όλους τους κανόνες στυλ που ορίζονται στο %placeholder-selector και θα δημιουργήσει την αντίστοιχη έξοδο CSS.

Πλεονεκτήματα και ισχύοντα σενάρια

  • Μείωση διπλασιασμού: Οι επιλογείς θέσης καθιστούν δυνατό τον καθορισμό ενός κοινού συνόλου κανόνων στυλ και την επαναχρησιμοποίησή τους μέσω κληρονομικότητας όταν χρειάζεται, αποφεύγοντας την αντιγραφή κώδικα.
  • Modularity: Οι επιλογείς placeholder συμβάλλουν στη σπονδυλωτή και τη συντηρησιμότητα κώδικα, ειδικά σε μεγάλα έργα, και μπορούν να βελτιώσουν τη δομική σαφήνεια των φύλλων στυλ.
  • Αποφυγή πλεονασμού: Σε σύγκριση με τη χρήση επιλογέων κλάσεων, οι επιλογείς κράτησης θέσης δεν δημιουργούν περιττούς επιλογείς, μειώνοντας έτσι το μέγεθος των αρχείων CSS.

Προφυλάξεις

  • Σειρά και θέση: Όταν χρησιμοποιείτε το @extend για να κληρονομήσετε τους επιλογείς κράτησης θέσης, ο κληρονομούμενος επιλογέας κράτησης θέσης πρέπει να οριστεί πριν χρησιμοποιηθεί ο επιλογέας του, διαφορετικά μπορεί να προκύψουν απροσδόκητα προβλήματα ιεραρχίας στυλ.
  • Μίξη: Μπορείτε να συνδυάσετε επιλογείς κράτησης θέσης με συνηθισμένους επιλογείς κλάσεων, αλλά πρέπει να τους χειριστείτε προσεκτικά για να αποφύγετε απροσδόκητη έξοδο CSS.

Συνοπτικά, ο επιλογέας κράτησης θέσης% είναι ένα ισχυρό εργαλείο στο SCSS που μπορεί να βοηθήσει τους προγραμματιστές να βελτιώσουν την επαναχρησιμοποίηση και τη δυνατότητα συντήρησης των φύλλων στυλ, μειώνοντας παράλληλα τον περιττό πλεονασμό CSS.

Ανακατεύουμε το @mixin

Οι μίξεις είναι ένα άλλο πολύ ισχυρό χαρακτηριστικό στο SCSS που επιτρέπει την ενθυλάκωση ενός συνόλου κανόνων στυλ σε ένα μπλοκ κώδικα που μπορεί να επαναχρησιμοποιηθεί και στη συνέχεια να γίνεται αναφορά όπου χρειάζεται. Σε αντίθεση με τον επιλογέα κράτησης θέσης %, τα mixins μπορούν να δημιουργήσουν απευθείας έξοδο CSS, επομένως είναι κατάλληλο για τις περιπτώσεις όπου το ίδιο στυλ χρειάζεται να χρησιμοποιηθεί σε πολλά μέρη.

Ορίστε το μείγμα

  1. @mixin mixin-name($parameter1, $parameter2, ...) {
  2.   // 样式规则使用参数
  3. }

Στο παραπάνω παράδειγμα, η λέξη-κλειδί @mixin ορίζει ένα mixin που ονομάζεται mixin-name που μπορεί να δεχτεί πολλαπλά ορίσματα (αν χρειάζεται) και ορίζει ένα σύνολο κανόνων στυλ μέσα σε αυτό.

μίγμα κλήσης

  1. .some-class {
  2.   @include mixin-name(value1, value2, ...);
  3.   // 可选的额外样式
  4. }

Χρησιμοποιήστε τη λέξη-κλειδί @include για να καλέσετε το mixin στον επιλογέα και να του μεταβιβάσετε παραμέτρους. Με αυτόν τον τρόπο, το .some-class θα εφαρμόσει τους κανόνες στυλ που ορίζονται στο mixin και θα εφαρμόσει τις τιμές παραμέτρων που έχουν περάσει στις αντίστοιχες μεταβλητές παραμέτρων.

παράδειγμα

  1. @mixin button-style($background-color, $text-color) {
  2.   display: inline-block;
  3.   padding: 10px 20px;
  4.   border: none;
  5.   border-radius: 4px;
  6.   background-color: $background-color;
  7.   color: $text-color;
  8.   text-align: center;
  9.   text-decoration: none;
  10.   font-size: 16px;
  11.   cursor: pointer;
  12.   transition: background-color 0.3s ease;
  13.  
  14.   &:hover {
  15.     background-color: darken($background-color, 10%);
  16.   }
  17. }
  18. .button-primary {
  19.   @include button-style(#3498db, #fff);
  20. }
  21.  
  22. .button-secondary {
  23.   @include button-style(#2ecc71, #fff);
  24. }

 

Πλεονεκτήματα και ισχύοντα σενάρια

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

Προφυλάξεις

  • Διένεξες ονομάτων: Βεβαιωθείτε ότι τα mixins δεν έρχονται σε διένεξη με υπάρχοντα ονόματα κλάσεων CSS ή άλλα mixins για να αποφύγετε απροσδόκητες παρακάμψεις ή σφάλματα στυλ.
  • Διαβίβαση παραμέτρων: Όταν καλείτε ένα mixin, βεβαιωθείτε ότι οι τύποι παραμέτρων και η σειρά που δόθηκε είναι συνεπείς με τις απαιτήσεις του ορισμού mixin για να αποφύγετε σφάλματα μεταγλώττισης ή απροσδόκητη συμπεριφορά.
  • Αντίκτυπος στην απόδοση: Η εκτεταμένη χρήση mixins μπορεί να αυξήσει το μέγεθος των αρχείων CSS που προκύπτουν, επομένως να είστε προσεκτικοί με τον αντίκτυπο στην απόδοση.

Συνοπτικά, το mix @mixin είναι ένα ισχυρό εργαλείο για την ενθυλάκωση και την επαναχρησιμοποίηση κανόνων στυλ στο SCSS. Μπορεί να βελτιώσει σημαντικά τη συντηρησιμότητα και την ευελιξία του CSS και είναι κατάλληλο για διάφορες σύνθετες και επαναλαμβανόμενες απαιτήσεις στυλ.

Το SCSS χρησιμοποιεί εντολές υπό όρους

Στο SCSS, οι εντολές υπό όρους επιτρέπουν στα στυλ CSS να δημιουργούνται δυναμικά με βάση συγκεκριμένες συνθήκες. Οι δηλώσεις υπό όρους στο SCSS είναι παρόμοιες με τις προτάσεις υπό όρους σε άλλες γλώσσες προγραμματισμού, συμπεριλαμβανομένων των @if, @else if και @else.

δήλωση @if

Η δήλωση @if επιτρέπει τη δημιουργία στυλ με βάση μια συνθήκη. Η σύνταξη έχει ως εξής:

  1. $use-rounded-corners: true;
  2.  
  3. .button {
  4.   @if $use-rounded-corners {
  5.     border-radius: 4px;
  6.   }
  7. }

Στο παραπάνω παράδειγμα, εάν η τιμή της μεταβλητής $use-rounded-corners είναι αληθής, δημιουργείται το στυλ της κλάσης .button, συμπεριλαμβανομένου του border-radius: 4px;. Εάν η συνθήκη είναι ψευδής, αυτό το τμήμα του στυλ δεν θα δημιουργηθεί.

δηλώσεις @else και @else if

Εκτός από το @if, μπορείτε επίσης να χρησιμοποιήσετε τα @else if και @else για να προσθέσετε περισσότερους κλάδους υπό όρους.

  1. $button-size: medium;
  2.  
  3. .button {
  4.   @if $button-size == small {
  5.     padding: 5px 10px;
  6.   } @else if $button-size == medium {
  7.     padding: 10px 25px;
  8.   } @else if $button-size == large {
  9.     padding: 15px 30px;
  10.   } @else {
  11.     padding: 10px 20px; // 默认值
  12.   }
  13. }

Σε αυτό το παράδειγμα, ανάλογα με την τιμή της μεταβλητής $button-size, επιλέγονται διαφορετικές τιμές padding που θα εφαρμοστούν στην κλάση .button. Εάν δεν υπάρχει συνθήκη αντιστοίχισης, το μπλοκ κώδικα στο @else θα εκτελεστεί.

Ένθεση προτάσεων υπό όρους

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

  1. $button-style: flat;
  2. $button-size: medium;
  3.  
  4. .button {
  5.   @if $button-style == flat {
  6.     background-color: transparent;
  7.     color: #333;
  8.     border: 1px solid #333;
  9.  
  10.     @if $button-size == small {
  11.       padding: 5px 10px;
  12.     } @else if $button-size == medium {
  13.       padding: 10px 25px;
  14.     } @else if $button-size == large {
  15.       padding: 15px 30px;
  16.     } @else {
  17.       padding: 10px 20px; // 默认值
  18.     }
  19.   } @else if $button-style == raised {
  20.     background-color: #3498db;
  21.     color: #fff;
  22.     padding: 10px 20px;
  23.     border-radius: 4px;
  24.   } @else {
  25.     // 默认样式
  26.     background-color: #db6334;
  27.     color: #fff;
  28.     padding: 10px 20px;
  29.   }
  30. }

Σε αυτό το παράδειγμα, επιλέγονται διαφορετικά στυλ για εφαρμογή με βάση τις τιμές $button-style και $button-size. Αυτή η ένθετη προσέγγιση καθιστά δυνατή τη δημιουργία πολύπλοκων κανόνων στυλ με βάση πολλαπλές συνθήκες.

Συμπερασματικά

Χρησιμοποιώντας εντολές υπό όρους, μπορείτε να επιτύχετε πιο ευέλικτο και δυναμικό ορισμό στυλ στο SCSS και να δημιουργήσετε διαφορετικούς κανόνες CSS με βάση διαφορετικές συνθήκες, βελτιώνοντας έτσι τη δυνατότητα συντήρησης και επεκτασιμότητας του φύλλου στυλ.

Τρεις τύποι βρόχων στο SCSS

Στο SCSS, υπάρχουν τρεις κύριες δομές βρόχου που μπορούν να χρησιμοποιηθούν για τη δημιουργία επαναλαμβανόμενων κανόνων CSS: @for, @each και @while.

@for loop

Ο βρόχος @for χρησιμοποιείται για την επανειλημμένη δημιουργία στυλ σύμφωνα με συγκεκριμένα βήματα και συνθήκες.

βασική γραμματική：

  1. @for $i from <start> through <end> {
  2.   // 循环体
  3. }
  • από<start> διά μέσου<end> : Καθορίστε την τιμή έναρξης και την τιμή λήξης του βρόχου (συμπεριλαμβανομένης της τιμής τέλους).
  • Η μεταβλητή $i μπορεί να χρησιμοποιηθεί στο σώμα του βρόχου για να αναπαραστήσει την τιμή του δείκτη του τρέχοντος βρόχου.

Παράδειγμα：

  1. @for $i from 1 through 3 {
  2.   .item-#{$i} {
  3.     width: 100px * $i;
  4.   }
  5. }

Στο παραπάνω παράδειγμα, δημιουργούνται τρεις κλάσεις .item-1, .item-2 και .item-3, με πλάτη ρυθμισμένα σε 100px, 200px και 300px αντίστοιχα.

@κάθε βρόχο

Ο βρόχος @each χρησιμοποιείται για τη διέλευση δεδομένων τύπου λίστας ή χαρτογράφησης και τη δημιουργία στυλ για κάθε στοιχείο.

βασική γραμματική：

  1. @each $var in <list or map> {
  2.   // 循环体
  3. }
  • $var: αντιπροσωπεύει τη μεταβλητή του τρέχοντος βρόχου.
  • <list or map>: Μπορεί να είναι λίστα (όπως $list: item1, item2, item3;) ή χάρτης (ζεύγος κλειδιού-τιμής).

Παράδειγμα：

  1. $colors: (red, green, blue);
  2.  
  3. @each $color in $colors {
  4.   .text-#{$color} {
  5.     color: $color;
  6.   }
  7. }

 

Σε αυτό το παράδειγμα, δημιουργούνται τρεις κλάσεις .text-red, .text-green και .text-blue και τα χρώματα του κειμένου τους ορίζονται σε αντίστοιχες τιμές χρώματος.

@while βρόχος

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

βασική γραμματική：

  1. $i: 1;
  2. @while $i < 4 {
  3.   // 循环体
  4.   $i: $i + 1; // 更新条件
  5. }
  • $i: ως μετρητής βρόχου ή μεταβλητή συνθήκης.
  • Οποιοσδήποτε κώδικας SCSS μπορεί να εκτελεστεί στο σώμα του βρόχου Συνήθως, η μεταβλητή συνθήκης πρέπει να ενημερωθεί στο τέλος του σώματος βρόχου για να αποφευχθούν οι άπειροι βρόχοι.

Παράδειγμα：

  1. $i: 1;
  2. @while $i < 4 {
  3.   .item-#{$i} {
  4.     width: 100px * $i;
  5.   }
  6.   $i: $i + 1;
  7. }

Αυτός ο κώδικας δημιουργεί τρεις κλάσεις .item-1, .item-2 και .item-3 και ορίζει τα πλάτη τους σε 100px, 200px και 300px αντίστοιχα.

Συνοψίζω

Οι τρεις δομές βρόχου SCSS @for, @each και @while χρησιμοποιούνται για βρόχο ανά ευρετήριο, λίστα διασταύρωσης ή δεδομένα τύπου χάρτη και για τη δημιουργία στυλ που βασίζονται σε βρόχους υπό όρους αντίστοιχα. Αυτές οι δομές βρόχου κάνουν το SCSS πιο ισχυρό και ευέλικτο, ικανό να δημιουργεί πολύπλοκους κανόνες CSS σύμφωνα με τις ανάγκες.

Προσαρμοσμένες λειτουργίες και χρήση

Στο SCSS, τα φύλλα στυλ μπορούν να βελτιωθούν με προσαρμοσμένες συναρτήσεις που δέχονται παραμέτρους και επιστρέφουν επεξεργασμένες τιμές.

Ορίστε προσαρμοσμένες λειτουργίες

Στο SCSS, χρησιμοποιήστε τη λέξη-κλειδί @function για να ορίσετε συναρτήσεις, οι οποίες μπορεί να έχουν παραμέτρους και τιμές επιστροφής. Για παράδειγμα, ορίζουμε μια συνάρτηση για τον υπολογισμό του συνολικού πλάτους μοντέλου πλαισίου ενός στοιχείου:

  1. @function total-width($padding, $border, $margin, $content-width) {
  2.   @return $padding + $border + $margin + $content-width;
  3. }

Στο παραπάνω παράδειγμα:

  • total-width είναι το όνομα της συνάρτησης.
  • Η συνάρτηση δέχεται τέσσερις παραμέτρους: $padding, $border, $margin, $content-width.
  • Η δήλωση @return χρησιμοποιείται για να επιστρέψει μια υπολογισμένη τιμή.

Χρησιμοποιήστε προσαρμοσμένες λειτουργίες

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

  1. .element {
  2.   width: total-width(10px, 1px, 5px, 100px);
  3. }

 

Σε αυτό το παράδειγμα, η συνάρτηση συνολικού πλάτους θα κληθεί με τις παραμέτρους 10px, 1px, 5px και 100px. Το αποτέλεσμα που επιστρέφεται από τη συνάρτηση (116 εικονοστοιχεία) θα εφαρμοστεί στην ιδιότητα πλάτους του στοιχείου.

Προφυλάξεις

  • Οι συναρτήσεις μπορούν να συμπεριληφθούν σε οποιοδήποτε αρχείο SCSS και μπορούν να οργανωθούν και να εισαχθούν όπως άλλοι κανόνες στυλ.
  • Όλες οι δυνατότητες του SCSS, όπως εντολές ελέγχου (όπως @if, @for, @each, @while) και ενσωματωμένες συναρτήσεις, μπορούν να χρησιμοποιηθούν σε συναρτήσεις.
  • Οι παράμετροι της συνάρτησης μπορεί να είναι οποιοσδήποτε τύπος δεδομένων SCSS, συμπεριλαμβανομένων αριθμών, συμβολοσειρών, χρωμάτων κ.λπ.

Εργασία για το σπίτι

Χρησιμοποιήστε το SCSS για να αλλάξετε το ασπρόμαυρο θέμα της σελίδας

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link rel="stylesheet" href="main.css">
  7.   <title>黑白色主题切换</title>
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <button id="theme-toggle">切换主题</button>
  12.     <div class="box">
  13.       <div class="content">
  14.         <p>这是一些文本内容。</p>
  15.         <p>这是一些文本内容。</p>
  16.         <p>这是一些文本内容。</p>
  17.         <p>这是一些文本内容。</p>
  18.         <p>这是一些文本内容。</p>
  19.         <p>这是一些文本内容。</p>
  20.         <p>这是一些文本内容。</p>
  21.       </div>
  22.     </div>
  23.   </div>
  24.  
  25.   <script src="main.js"></script>
  26. </body>
  27. </html>

scss

  1. // 定义轻主题的样式变量
  2. $light-theme: (
  3.   background-color: white,
  4.   text-color: black,
  5.   highlight-color: #f0f0f0
  6. );
  7.  
  8. // 定义暗主题的样式变量
  9. $dark-theme: (
  10.   background-color: black,
  11.   text-color: white,
  12.   highlight-color: #333333
  13. );
  14.  
  15. // 定义一个混合（mixin）来应用主题样式
  16. // 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
  17. @mixin theme($theme) {
  18.   background-color: map-get($theme, background-color);
  19.   color: map-get($theme, text-color);
  20.  
  21.   // 为 .box 类应用主题的高亮颜色
  22.   .box {
  23.     background-color: map-get($theme, highlight-color);
  24.   }
  25. }
  26.  
  27. // 应用轻主题样式到 body 元素，并添加过渡效果
  28. body {
  29.   @include theme($light-theme);
  30.   transition: all 0.3s ease;
  31. }
  32.  
  33. // 为 body 的 dark 类应用暗主题样式
  34. body.dark {
  35.   @include theme($dark-theme);
  36. }
  37.  
  38. // 设置容器的文本居中和顶部间距
  39. .container {
  40.   text-align: center;
  41.   margin-top: 20px;
  42. }
  43.  
  44. // 配置主题切换按钮的样式
  45. #theme-toggle {
  46.   padding: 10px 20px;
  47.   cursor: pointer;
  48.   border: none;
  49.   outline: none;
  50.   background-color: #007bff;
  51.   color: white;
  52.   font-size: 16px;
  53.   border-radius: 5px;
  54. }
  55.  
  56. // 鼠标悬停在主题切换按钮上时改变背景色
  57. #theme-toggle:hover {
  58.   background-color: #0056b3;
  59. }
  60.  
  61. // 定义 .box 类的基本样式和过渡效果
  62. .box {
  63.   margin: 20px auto;
  64.   padding: 20px;
  65.   width: 50%;
  66.   border: 1px solid #ccc;
  67.   transition: all 0.3s ease;
  68.  
  69.   // 内容区域的样式配置
  70.   .content {
  71.     p {
  72.       margin: 10px 0;
  73.     }
  74.   }
  75. }

js

  1. /**
  2.  * 为主题切换按钮添加点击事件监听器
  3.  * 当按钮被点击时，切换文档主体的黑暗主题样式
  4.  * 
  5.  * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
  6.  * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
  7.  * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
  8.  */
  9. document.getElementById('theme-toggle').addEventListener('click', () => {
  10.   document.body.classList.toggle('dark');
  11. });

Προσωπικό προφίλ

Έχει αφοσιωθεί στην έρευνα της τεχνολογίας για περισσότερα από 30 χρόνια και είναι ικανός σε διάφορες γλώσσες όπως java, linux, javascript, php, css κ.λπ. Έχει κάνει πολλές συνεισφορές στον τομέα του ανοιχτού κώδικα τεκμηρίωσης προγραμματιστή για να μοιραστείτε τα ζητήματα στην ανάπτυξη τεχνολογίας για μελλοντική αναφορά

τα στοιχεία επικοινωνίας μου

Ταχυδρομείο