Μάθετε μεταβλητές CSS σε 5 λεπτά

Ένα γρήγορο σεμινάριο για το πώς να ξεκινήσετε.

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

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

Δημιούργησα επίσης ένα δωρεάν και διαδραστικό μάθημα 8 μερών για τις μεταβλητές CSS, επομένως ελέγξτε εάν θέλετε να γίνετε ειδικός σε αυτό το θέμα.

Γιατί να μάθετε μεταβλητές CSS;

Υπάρχουν πολλοί λόγοι για τη χρήση μεταβλητών στο CSS. Ένα από τα πιο συναρπαστικά είναι ότι μειώνει την επανάληψη στο φύλλο στυλ σας.

Στο παραπάνω παράδειγμα, είναι πολύ καλύτερο να δημιουργήσετε μια μεταβλητή για το #ffeead χρώμα από το να την επαναλάβετε, όπως κάνουμε εδώ:

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

Τώρα αυτό ήταν πράγματι δυνατό με τις μεταβλητές SASS και LESS για χρόνια. Ωστόσο, υπάρχουν μερικά μεγάλα οφέλη με μεταβλητές CSS.

  1. Δεν απαιτούν καθόλου εργασία μετακίνησης, καθώς είναι εγγενείς στο πρόγραμμα περιήγησης. Επομένως, δεν χρειάζεστε καμία ρύθμιση για να ξεκινήσετε, όπως κάνετε με το SASS και λιγότερο.
  2. Ζουν στο DOM, το οποίο ανοίγει έναν τόνο παροχών, το οποίο θα περάσω μέσα σε αυτό το άρθρο και στην επερχόμενη πορεία μου.

Τώρα ας αρχίσουμε να μαθαίνουμε Μεταβλητές CSS!

Δηλώνοντας την πρώτη σας μεταβλητή CSS

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

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

: root {
  --main-color: # ff6f69;
}}

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

Για να αποκτήσετε πρόσβαση σε μια μεταβλητή, πρέπει να χρησιμοποιήσετε τη λειτουργία var () και να μεταβείτε στο όνομα της μεταβλητής ως παράμετρος.

#τίτλος {
  χρώμα: var (- κύριο χρώμα);
}}

Και αυτό θα δώσει τον τίτλο σας το # f6f69 χρώμα:

Δηλώνοντας μια τοπική μεταβλητή

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

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

.συναγερμός {
  --alert -colour: # ff6f69;
}}

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

.alert p {
  χρώμα: var (- alert-color);
  σύνορα: 1px solid var (- alert-color);
}}

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

Ευκολότερη απόκριση με τις μεταβλητές

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

Στην πράξη αυτό σημαίνει ότι μπορείτε, για παράδειγμα, να αλλάξετε τις μεταβλητές με βάση το πλάτος της οθόνης:

: root {
  --main-font-size: 16px;
}}
όλα τα μέσα και (μέγιστο πλάτος: 600px) {
  : root {
    --main-font-size: 12px;
  }}
}}

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

Πώς να αποκτήσετε πρόσβαση στις μεταβλητές με το JavaScript

Ένα άλλο πλεονέκτημα της διαβίωσης στο DOM είναι ότι μπορείτε να έχετε πρόσβαση στις μεταβλητές με το JavaScript, και μάλιστα να τις ενημερώσετε, για παράδειγμα με βάση τις χρησιμοποιούμενες αλληλεπιδράσεις. Αυτό είναι τέλειο αν θέλετε να δώσετε στους χρήστες τη δυνατότητα αλλαγής του ιστότοπού σας (όπως ρύθμιση μεγέθους γραμματοσειράς).

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

var ρίζα = document.querySelector (': root');
var rootStyles = getComputedStyle (ρίζα);
var mainColor = rootStyles.getPropertyValue ('- κύριο χρώμα');
console.log (mainColor);
-> '#feedad'

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

root.style.setProperty ('- κύριο χρώμα', '# 88d8b0')

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

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

Υποστήριξη προγράμματος περιήγησης

Επί του παρόντος, το 77% της παγκόσμιας κυκλοφορίας ιστότοπων υποστηρίζει μεταβλητές CSS, με σχεδόν 90% στις ΗΠΑ. Χρησιμοποιούμε ήδη μεταβλητές CSS στο Scrimba.com για κάποιο χρονικό διάστημα τώρα, καθώς το ακροατήριό μας είναι αρκετά κατανοητό από την τεχνολογία και χρησιμοποιεί ως επί το πλείστον σύγχρονα προγράμματα περιήγησης.

Εντάξει, αυτό ήταν. Ελπίζω να μάθατε κάτι!

Αν θέλετε να το μάθετε σωστά, βεβαιωθείτε ότι έχετε ελέγξει τη δωρεάν σειρά μαθημάτων CSS μεταβλητών στο Scrimba.

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