Θέλετε να μάθετε μεταβλητές CSS; Εδώ είναι το δωρεάν μαθήματό μου με 8 μέρη!

Φωτογραφία από τον Mikael Kristenson στο Unsplash

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

Για να σας βοηθήσω να ξεκινήσετε, έχω δημιουργήσει ένα δωρεάν μάθημα για τις μεταβλητές CSS στο Scrimba.

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

Η δομή του μαθήματος

Το μάθημα περιλαμβάνει 8 διαδραστικές εκπομπές. Είναι όλα μεταξύ 3-6 λεπτών, καθώς ο στόχος μου είναι να σας διδάξω μεταβλητές CSS το συντομότερο δυνατό. Στο τέλος κάποιων από αυτές, θα σας δώσω μια πρόκληση και θα σας ενθαρρύνω να παίξετε με τον κώδικα διαδραστικά. Αυτό μπορεί να γίνει απευθείας στο πρόγραμμα περιήγησης, καθώς τα προγράμματα προβολής Scrimba καθιστούν δυνατή αυτή τη λειτουργία.

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

Τώρα ας ρίξουμε μια ματιά σε κάθε ένα από τα μαθήματα.

Μάθημα # 1: Γιατί να μάθετε μεταβλητές CSS

Στην πρώτη τηλεοπτική εκπομπή, θα μιλήσω γιατί πρέπει να μάθετε μεταβλητές CSS. Θα συζητήσω τα γενικά οφέλη καθώς και τα πλεονεκτήματά του έναντι των μεταβλητών SASS και LESS.

Μάθημα # 2: Η πρώτη μεταβλητή CSS

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

: root {
  --red: # ff6f69;
}}
σώμα {
  χρώμα: var (- κόκκινο);
}}

Μάθημα # 3: Υπέρβαση των μεταβλητών

Θα συνεχίσουμε με επικρατέστερη, μια δροσερή ιδέα που είναι δυνατή από τότε που οι μεταβλητές CSS έχουν πρόσβαση στο DOM και κληρονομούνται από την ιεραρχία. Αυτό τους χωρίζει σαφώς από τις μεταβλητές SASS και LESS, οι οποίες δουλεύουν περισσότερο σαν σταθερές από τις μεταβλητές όταν χτυπούν το πρόγραμμα περιήγησης και δεν έχουν γνώση του DOM.

Μάθημα # 4: Τοπικές μεταβλητές

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

Μάθημα # 5: Theming με μεταβλητές CSS

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

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

Μάθημα # 6: Αλλαγή μεταβλητών με JavaScript

Μπορείτε επίσης να αλλάξετε τις μεταβλητές CSS με JavaScript, κάτι που είναι πολύ χρήσιμο. Αυτό ανοίγει τη δυνατότητα να επιτρέψετε στους χρήστες σας να αλλάξουν τις μεταβλητές σας. Και πάλι κάτι που δεν είναι δυνατό με τις μεταβλητές LESS και SASS. Ένα πολύ σημαντικό παράδειγμα αυτού είναι να επιτρέπεται στους χρήστες να προσαρμόζουν το συνολικό μέγεθος της γραμματοσειράς στον ιστότοπό σας. Αυτό θα το καταστήσει πιο προσιτό σε άτομα με κακή όραση.

Μάθημα # 7: Ανταπόκριση με μεταβλητές CSS

Δεδομένου ότι οι μεταβλητές CSS έχουν πρόσβαση στο DOM, μπορούν επίσης να αλλάξουν ανάλογα με το μέγεθος της οθόνης. Αυτό είναι στην πραγματικότητα μόνο ένα παράδειγμα για την υπερισχύει, αλλά νομίζω ότι αξίζει ένα ολόκληρο νέο screencast, καθώς η ανταπόκριση είναι αρκετά πυρήνα αυτές τις μέρες. Όλα όσα καθιστούν ευκολότερη την ανταπόκριση θα πρέπει να χρησιμοποιηθούν από τους προγραμματιστές του front-end.

Μάθημα # 8: Μεταβλητές CSS και κληρονομικότητα

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

Και αυτό είναι. Πηγαίνοντας από αυτές τις γρήγορες εκπομπές, θα έχετε μια σωστή κατανόηση των μεταβλητών CSS. Η παρακολούθηση τους θα σας πάρει λιγότερο από 30 λεπτά και μπορείτε επίσης να προσαρμόσετε την ταχύτητα επανάληψης για να γίνει ακόμα πιο γρήγορα.

Με άλλα λόγια: αυτό το μάθημα είναι ίσως ο πιο γρήγορος τρόπος για να μάθετε σωστά τις μεταβλητές CSS.

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

Η μορφή Scrimba

Το μάθημα κατασκευάζεται με τη χρήση του Scrimba, ενός διαδραστικού εργαλείου μετάδοσης κώδικα, του οποίου είμαι συνιδρυτής, μαζί με τους Magnus και Sindre.

Όπως ανέφερα προηγουμένως, το μοναδικό πράγμα με το Scrimba είναι ότι οι τηλεοπτικές εκπομπές είναι πλήρως διαδραστικές, πράγμα που σημαίνει ότι μπορείτε να επεξεργαστείτε τον κώδικα μέσα στα cast.

Εδώ είναι ένα gif που εξηγεί την έννοια:

Παύση της προβολής οθόνης → Επεξεργασία του κωδικού → Εκτέλεση! → Δείτε τις αλλαγές σας

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

Επίσης, οι μεταδόσεις Scrimba ζυγίζουν 1% των βίντεο σε μέγεθος αρχείου, πράγμα που σημαίνει ότι είναι πολύ πιο εύκολο να παρακολουθήσετε ακόμα και όταν η σύνδεση στο Internet είναι αργή.

Γι 'αυτό δείτε το μάθημα σήμερα, και ευτυχής κωδικοποίηση :)

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per, είμαι ο συνιδρυτής της Scrimba, και μου αρέσει να βοηθάω τους ανθρώπους να μάθουν νέες δεξιότητες. Παρακολουθήστε με στο Twitter αν θέλετε να ενημερώνεστε για νέα άρθρα και πόρους.